Android App Development for Phones/Tablets: REACT NATIVE ImageBackground Example

Friday, 28 July 2023

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;