React-Native: React must be in scope when using JSX - reactjs

Question

I have a navigation.js which returns SwitchNavigator...
I want to put TabIcon in one of the screens....But i can't do it inside the screen,
i.e
static navigationOptions = () => ({
header: null,
tabBarLabel: 'Orders',
});
As i have a nested tab, so i don't have a screen where i can do this ....here is my code
navigation.js
const AppStack = TabNavigator({
//ORDER TAB----->>>>
orders: {
navigationOptions: {
tabBarLabel: 'Orders',
},
screen: TabNavigator({
navigationOptions: {
tabBarLabel: 'Orders',
tabBarIcon: ({ tintColor }) => {
return <Icon name="shopping-cart" size={20} color={tintColor} />;
}
},
awaitingScreen: {
screen: StackNavigator({
awaiting: { screen: AwaitingScreen },
awaitingorderdetail: { screen: AwaitingDetailScreen }
})
},
confirmedscreen: {
screen: StackNavigator({
confirmed: { screen: ConfirmedScreen },
confirmedorderdetail: { screen: ConfirmedDetailScreen }
})
},
}, {
tabBarOptions: {
activeTintColor: '#415041', // Color o f tab when pressed
inactiveTintColor: '#b5b5b5', // Color of tab when not pressed
showIcon: 'true', // Shows an icon for both iOS and Android
//showLabel: (Platform.OS !== 'android'), //No label for Android
lazy: true,
animationEnabled: false,
indicatorStyle: {
borderBottomColor: '#f5e9dd',
borderBottomWidth: 2,
},
labelStyle: {
fontSize: 10,
color: 'white',
fontFamily: 'NeutraText-Book'
},
style: {
backgroundColor: '#415041',
}
}
}
)
},
//PAYMENT TAB---->>>
payments: { screen: PaymentScreen },
//CUSTOMER TAB----->>
customers: { screen: CustomerScreen },
//MESSAGES TAB----->>
messages: { screen: MessageScreen },
//backBehavior: 'none',
},
{
headerMode: 'none', // I don't want a NavBar at top
tabBarPosition: 'bottom', // So your Android tabs go bottom
swipeEnabled: false,
lazy: true,
animationEnabled: false,
tabBarOptions: {
activeTintColor: '#415041', // Color o f tab when pressed
inactiveTintColor: '#b5b5b5', // Color of tab when not pressed
showIcon: 'true', // Shows an icon for both iOS and Android
//showLabel: (Platform.OS !== 'android'), //No label for Android
labelStyle: {
fontSize: 8,
margin: 0,
padding: 0,
fontFamily: 'NeutraText-Book'
},
indicatorStyle: {
borderBottomColor: '#f5e9dd',
borderBottomWidth: 2,
},
style: {
backgroundColor: '#fff', // Makes Android tab bar white instead of standard blue
}
}
});
const AuthStack = TabNavigator({
selectadmin: { screen: SelectAdminScreen },
otp: { screen: OtpScreen },
password: { screen: PasswordScreen },
pin: { screen: PinScreen }
},
{
navigationOptions: {
tabBarVisible: false
},
tabBarPosition: 'bottom',
swipeEnabled: false,
lazy: true,
animationEnabled: false,
//backBehavior: 'none',
}
);
export default SwitchNavigator(
{
AuthLoading: AppLoadingScreen,
App: AppStack,
Auth: AuthStack,
},
{
initialRouteName: 'AuthLoading',
}
);
Now i want to import this navigator inside App.js
like
export default class App extends React.Component {
render() {
return (
<View style={{ flex: 1 }}>
<SwitchNavigator />
</View>
);
}
}
But i can't do this as i can't return JSX without React,
So is there any work around? I can declare all this inside my App.js but That is my last option as it will make my code messy.
return <Icon name="shopping-cart" size={20} color={tintColor}
It returns React must be in scope

Answer 1

Make sure to always import React in every file that contains jsx:
import React from 'react';
The error indicates that you forgot to do so in a file that contains jsx.