Box Modal in React Native

Learn how to create a simple and responsive box modal using margin, padding, flex, borderWidth, and borderColor in React Native.

Free Code Example




Code Example

import { View, Text, SafeAreaView, StyleSheet } from 'react-native';
import React from 'react'; import { heightPercentageToDP as hp, widthPercentageToDP as wp, } from 'react-native-responsive-screen'; const Home = () => { return ( <SafeAreaView style={styles.container}> <View style={styles.box}> <Text style={styles.text}>Content - 1</Text> </View> </SafeAreaView> ); }; export default Home; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'orange', }, box: { backgroundColor: 'green', width: wp('50%'), height: hp('25%'), borderColor: 'white', borderWidth: wp('3%'), padding: hp('2%'), margin: hp('4%'), }, text: { color: 'white', fontSize: hp('3%'), textAlign: 'center', }, });

Stay Connected!

Follow us for more such tutorials and tips: