I am trying to do a twitter clone to practice. I need to add some margin to the image in left and icon in right. This is the header right now.

photo

The code I tried:

<BottomTab.Screen
        name="Home"
        component={TabOneScreen}        
        options={({ navigation }: RootTabScreenProps<'TabOne'>) => ({
          
          headerRightContainerStyle: {
            marginRight:10,
          },  
          tabBarIcon: ({ color }) => <TabBarIcon name="md-home" color={color} />,
          headerTitle: () =>(
            <TabBarIcon name={"logo-twitter"} size={30} color={Colors.light.tint} />
          ),
          headerRight: () => (
            <MaterialCommunityIcons name={"star-four-points-outline"} size={30} color={Colors.light.tint}/>
          ),
          headerLeft: () => (
            <ProfilePicture size={40} image={'https://pbs.twimg.com/profile_images/1431295293564280838/25cTnq7B_400x400.jpg'}/>
          )
        })}
      /> 

it doesn't give an error but it doesn't add margin too.

CodePudding user response：

Have you tried any of the following

• Adding the margin to the components instead of the container
• Using paddingRight instead of marginRight in the headerRightContainerStyle

Sometimes adding margins to containers that use flexbox (all components in the case of react native) causes bugs and inconsistencies that can be avoided by using padding instead