CODEWITHSUNDEEP
react-nativereact-navigation
Rohan Choudhary
Rohan Choudhary

Reputation: 303

React Native Tab bar crashes the android app

This is the code for components and tab bar creation

const Tab = createMaterialTopTabNavigator<DownloadLedgerNavigatorParamList>()

function HomeScreen() {
    return (
      <View style={{ marginTop: 10, padding: 20 }}>
          <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
              Material Goods
          </Text>
          <Text style={{ color: '#00B256', marginTop: 10 }}>
              Note:
          </Text>
          <Text style={{ fontSize: 17, marginTop: 20 }}>
              Select Date Range
          </Text>
          <View style={{ borderWidth: 1, borderColor: '#A0AEC0', height: 40, marginTop: '10' }}>
              <Text>Select Date</Text>
          </View>
      </View>
    )
}

function SettingsScreen() {
    return (
      <View>
          <Text>Settings Screen</Text>
      </View>
    )
}

Now when Home Screen is called, then the app crashes

export function DownloadNavigator() {
    return (
      <>
          <AppGradient style={GRADIENT} />
          <Tab.Navigator>
              <Tab.Screen name="Aaa" component={HomeScreen} />
              <Tab.Screen name="Bbb" component={SettingsScreen} />
          </Tab.Navigator>
      </>
    )
}

But if I call the settings screen in both components then it is working fine. The problem is with HomeScreen only. Is it a bug?

Upvotes: 0

Views: 1274

Answers (1)

Julian Castro
Julian Castro

Reputation: 115

Try this for the HomeScreen. I don't think you can add the styling you are trying to add to Text components. So I would suggest layering them in a View Component. Also in the last View Component, you wrote marginTop: '10' as a string, not a number.

<View style={{ marginTop: 10, padding: 20 }}>
      <Text>
            Material Goods
      </Text>
      <View style = {{marginTop: 10}}>
      <Text style={{ color: '#00B256'}}>
            Note: 
      </Text>
      </View>
      <View style = {{marginTop: 20}}>
      <Text style={{ fontSize: 17}}>
            Select Date Range
      </Text>
      <View style={{ borderWidth: 1, borderColor: '#A0AEC0', height: 40, marginTop: 10 }}>
        <Text>Select Date</Text>
      </View>
</View>

Upvotes: 1

Related Questions