How do you add images and buttons to a header in react native?

Timothy Runts 0
Viewed 33

I’m currently working on a project in react native and I would like to style my header with multiple images and buttons. Can someone please give me the code to add 2 buttons and 2 images to the header? When I try to use multiple items it doesn’t work.

My code is:

const MyStack = () => {
  return (
    <NavigationContainer>
      
      <Stack.Navigator>
        
        <Stack.Screen 
          name="Home" 
          component={HomeScreen} 
          options={{
          
            headerLeft: () => (
              <Image
              style={{width: 50, height: 50}}
              source={require('./assets/videocamera.png')} 
              ></Image>

        
            
              ),
              
            headerRight: () => (
              <TouchableOpacity style={styles.signinheader} onPress={() => navigation.navigate('login')}>
                <Text style={styles.signincolor}>SIGN IN</Text>
              </TouchableOpacity>

            

          )}}
          />
header react-native
1 Answers

do check this out

https://snack.expo.dev/VgLPaKZqn

import * as React from 'react';
import { Button, View, Text,TouchableOpacity,StyleSheet,Image } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

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

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      
      
      <Stack.Navigator 
      >
        
        <Stack.Screen 
          name="Home" 
          component={HomeScreen} 
          options={{
            title:null,
            headerLeft: () => (
              <View style={{flexDirection:'row'}} >
              <Image
              style={{width: 50, height: 50 , marginRight:10}}
              source={{uri:"https://source.unsplash.com/user/c_v_r/100x100"}} 
               />
                <Image
              style={{width: 50, height: 50}}
              source={{uri:"https://source.unsplash.com/user/c_v_r/100x100"}} 
               />
               </View>

        
            
              ),
              
            headerRight: () => (
              <View style={{flexDirection:'row'}} >
              <TouchableOpacity style={styles.signinheader} onPress={() => navigation.navigate('Home')}>
                <Text style={styles.signincolor}>SIGN IN</Text>
              </TouchableOpacity>
              <TouchableOpacity style={{marginLeft:10}} onPress={() => navigation.navigate('Home')}>
                <Text style={styles.signincolor}>Press Me</Text>
              </TouchableOpacity>
              </View>

            

          )}}
          />
          </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({

})

export default App;

Hope it helps

enter image description here

Gaurav Roy0
Related