Close button round icon for Android and iOS using React Native

Question

I am trying to create a close button with clickable action. here, I need to design round close button icon and place it top of right corner in the view. How to achieve this using react-native?

enter image description here

Answer 1

This is it but you need to install first: react-native-vector-icons by following instructions here: https://github.com/oblador/react-native-vector-icons

import React from 'react';
import {TouchableOpacity,StyleSheet} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

const BUTTON_SIZE = 30
const BORDER_WIDTH = 1

function CloseButton(props:any){
    return (
        <TouchableOpacity onPress={props.onPress} style={[styles.button,{backgroundColor:'white',borderColor:props.color}]}>
            <Icon name={'close'} color={props.color} size={BUTTON_SIZE/2} />
        </TouchableOpacity>

    )
}
const styles = StyleSheet.create({
    button:{
        justifyContent:'center',
        alignItems:'center',
        width:BUTTON_SIZE+BORDER_WIDTH,
        height:BUTTON_SIZE+BORDER_WIDTH,
        borderWidth:BORDER_WIDTH,
        borderRadius:BUTTON_SIZE/2,
    }
})
export default CloseButton;

I hope my solution is what you're looking for, if you have any more questions don't hesitate. Sorry for the delay! :D

Answer 2

You have to create it using TouchableOpacity and Icon, Let me know if you need me to write you the code.

Answer 3

you are looking for that, aren't you?

import React, { FC } from 'react'
import styled from 'styled-components'
import { Icon } from 'react-native-elements'

const ICON_SIZE = 30
const BORDER_SIZE = 2

const App: FC = () => {
  return (
    <Container>
      <CloseButton
        onPress={() => {
          alert('magic stuff is happening!')
        }}
      >
        <Icon name={'close'} size={ICON_SIZE} color={'black'} />
      </CloseButton>
    </Container>
  )
}

export default App

const Container = styled.View`
  padding: 10px;
  background-color: palevioletred;
  height: 100%;
  width: 100%;
  flex-direction: row;
  justify-content: flex-end;
`
const CloseButton = styled.TouchableOpacity`
  background-color: white;
  width: ${ICON_SIZE + BORDER_SIZE}px;
  height: ${ICON_SIZE + BORDER_SIZE}px;
  border-radius: ${(ICON_SIZE + BORDER_SIZE) / 2}px;
  border-width: ${BORDER_SIZE}px;
`

Answer 4

How about using AntDesign icons (closecircle icon) and using TouchableOpacity and Text to form a touchable button area:

import { AntDesign } from '@expo/vector-icons' 

    <TouchableOpacity
      onPress={() => setModalVisible(!modalVisible)}
      style={styles.closeButton}
    >
      <Text>
            <AntDesign name='closecircle' size={height * 0.03} />
      </Text>
    </TouchableOpacity>



const styles = StyleSheet.create({
      closeButton: {
        borderRadius: height * 0.01,
        alignSelf: 'flex-end',
        marginBottom: height * 0.02,
      },
})