REACT NATIVE: How to make Drawer for whole screen

I have a problem with Drawer , how can i put drawer for other my Views, it is just in Header – View,
i want to make it for all screen like in normal programms :
This is my App.js, here is located everything started from logic and design

Thank you!

 
    <TouchableWithoutFeedback onPress={() => {
      Keyboard.dismiss();
    }}>     
          <View style={styles.container}>
            <View >
         
          <Header /> //Header.js

              <View style={styles.row}>
                <TextInput style={styles.input}
                  underlineColorAndroid="transparent"
                  placeholder="   Amount "
                  placeholderTextColor="#9a73ef"
                  autoCapitalize="none"
                  keyboardType='numeric'
                  onChangeText={text => setText(text)}
                  value={text}
                />
                <Picker
                  selectedValue={selectedValue}
                  style={{ height: 50, width: 150 }}
                  onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
                >

                  <Picker.Item value= " " label='Select Option' />
                  <Picker.Item label="Food" value="Food" />
                  <Picker.Item label="Transport" value="Transport" />
                  <Picker.Item label="Rent" value="Rent" />
                  <Picker.Item label="Other" value="Other " />

                </Picker>
              </View>
          <Text>TOTAL : {totalAmount}</Text>
         
              <Button
                title="Save"
                color="#841584"
                accessibilityLabel="Learn more about this purple button"
                onPress={() => {        
                 
                  if (text == 0 ) {
                    alert('Please enter the Amount ')     
                       }            
                
                  if (text && selectedValue != " "){
                  setData([...data, { name: text, selectedValue: selectedValue }

                    ])
                  
                   setTotalAmount(totalAmount + parseInt(text))
                 
                }}
                }         
                
                 />
          
          <View styles={styles.list}>
                <FlatList
                data={data}
                        
              renderItem={({ item }) => <React.Fragment>
                <Text style={styles.item}> {item.name}$ Spend on "
                    {item.selectedValue}"</Text>

              </React.Fragment>}

              keyExtractor={(item, index) => index.toString()}

            />
</View>
            </View>
          </View>      
</TouchableWithoutFeedback>
)};

Here is my my StyleSheet.style //CSS

const styles = StyleSheet.create({
  container: {
   flex: 1,
   backgroundColor: '#fff',
  },
  input: {
    margin: 15,
    height: 40,
    borderColor: 'black',
    borderWidth: 2,
    width: 80,
    flex: 1,
  },
  input2: {
    margin: 15,
    height: 40,
    borderColor: 'black',
    borderWidth: 2,
    width: 80,
   flex: 1,
  },

  row: {
    flexDirection: 'row'
  },

  item: {
    textAlign: 'center',
    marginTop: 20,
    padding: 20,
    fontSize: 20,
    backgroundColor: 'steelblue'
  },
  list: {
    marginTop: 20,
    flex: 1
  },
});

And Finally this is my Header.js


function HomeScreen({ navigation }) {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Button
                onPress={() => navigation.navigate('Notifications')}
                title="Go to notifications"
            />
        </View>
    );
}

function NotificationsScreen({ navigation }) {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Button onPress={() => navigation.goBack()} title="Go back home" />
        </View>
    );
}

const Drawer = createDrawerNavigator();

export default function Header() {
    return (

        <View style={styles.header}>
            <NavigationContainer>
                <Drawer.Navigator initialRouteName="Home">
                    <Drawer.Screen name="Home" component={HomeScreen} />
                    <Drawer.Screen name="Notifications" component={NotificationsScreen} />
                </Drawer.Navigator>
            </NavigationContainer>

            <Text style={styles.title}>My expenses   </Text>


        </View>
        
    );

}


const styles = StyleSheet.create({
    header: {
        height: 480,
        paddingTop: 38,
        backgroundColor: 'red',
        flex: 1
        
    },

    title: {
        textAlign: 'center',
        color: '#fff',
        fontSize: 20,
        fontWeight: 'bold',
        
    }

})

I want to make my page normal , cause even Flatlist can't see , and Drawer is taking most of place

124 thoughts on “REACT NATIVE: How to make Drawer for whole screen”

Leave a Comment