REACT NATIVE ImageBackground Example

 Day-3

import React, {Component} from 'react';

import {

View,

SafeAreaView,

TouchableOpacity,

ImageBackground,

Text,

StyleSheet,

} from 'react-native';

// create a component

const IntroScreen = () => {

return (

<View style={styles.container}>

{/* Background view */}

<ImageBackground

resizeMode="cover"

style={styles.imageContainer}

source={require('../../assets/bg_image_1.jpeg')}>

<View style={{flex: 1, backgroundColor: 'black', opacity: 0.3}} />

</ImageBackground>

{/* Front view */}

<View style={styles.bottomContainer}>

<View>

<Text style={styles.findText}>Find your Favourite food ...</Text>

<TouchableOpacity style={styles.buttonExplore}>

<Text style={styles.explore}>Explore Now</Text>

</TouchableOpacity>

</View>

</View>

</View>

);

};

// define your styles

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#2c3e50',

},

imageContainer: {

flex: 1,

width: '100%',

height: '100%',

},

explore: {

color: 'black',

fontSize: 20,

fontWeight: '700',

},

buttonExplore: {

padding: 8,

backgroundColor: 'white',

borderRadius: 8,

alignItems: 'center',

marginTop: 10,

},

findText: {

color: 'white',

fontWeight: '800',

fontSize: 40,

textTransform: 'capitalize',

},

bottomContainer: {

position: 'absolute',

height: '100%',

zIndex: 2,

width: '100%',

justifyContent: 'flex-end',

paddingHorizontal: 20,

paddingBottom: 50,

},

});

//make this component available to the app

export default IntroScreen;

Screenshots