How To Use Full Screen background Image In React Native app

Full screen background image in React Native app

app.js code

import {ImageBackground,, SafeAreaView, StyleSheet,  ScrollView,  View,  Text,  Alert,  Image,  StatusBar,  TextInput,  Button,  FlatList,} from 'react-native';

  const image = { uri: "https://reactjs.org/logo-og.png" };

return (


    <ImageBackground source={image} style={styles.image}>

      <ScrollView style={styles.scrollView}>

        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: 20, }}>
          <Image style={{ width: 100, height: 100, borderColor: 'red', borderWidth: 1, borderRadius: 100, }}
            source={require('./src/assets/images/logo.png')}
          />
        </View>

        <View style={styles.formGroup}>
          <Text style={styles.label} >  name </Text>
          <TextInput style={styles.formControl} />
        </View>


        <View style={styles.formGroup}>
          <Text style={styles.label} >  Email </Text>
          <TextInput style={styles.formControl} />        </View>

        <Button title="Press me" onPress={createTwoButtonAlert} />

      </ScrollView>


    </ImageBackground>




  );
};

CSS

// ############### css




const styles = StyleSheet.create({




  image: {
    padding: 20,
    minHeight: 100,
    flex: 1,
    resizeMode: 'cover',

  },

  // ########### formGroup

  formGroup: {
    marginBottom: 20,
  },

  label: {
    color: '#fff',
    marginBottom: 10,
    paddingHorizontal: 0,
    fontSize: 13,
    textTransform: 'capitalize',
  },

  formControl: {
    // flex: 1,
    minHeight: 35,
    paddingHorizontal: 10,
    backgroundColor: '#FFF',
    borderRadius: 3,
  },




});