TabView is not working inside a ImageBackground - react-native

Question

I have a TabView inside a ImageBackground in react-native app. The TabView does not show up but it is displayed when given as a parent element.
<ImageBackground source={require('../assets/images/loginBg.png')} style={styles.container}>
<TabView
navigationState={this.state}
renderScene={SceneMap({
first: FirstRoute,
second: SecondRoute,
})}
onIndexChange={index => this.setState({ index })}
initialLayout={{ width: Dimensions.get('window').width }}
style={innerStyles.innerContainer}
/>
</ImageBackground >
);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '50%',
},
});
const innerStyles = StyleSheet.create({
innerContainer: {
flex: 1,
},
scene: {
flex: 1,
},
});

Answer 1

You have to reconstruct the headers using the RenderTabBar function. I made an example of using the imageBackground that you want in the answer.
import * as React from 'react';
import { View, TouchableOpacity, StyleSheet, ImageBackground } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
import Animated from 'react-native-reanimated';
const FirstRoute = () => (
<View style={[styles.container, { backgroundColor: '#ff4081' }]} />
);
const SecondRoute = () => (
<View style={[styles.container, { backgroundColor: '#673ab7' }]} />
);
export default class TabViewExample extends React.Component {
state = {
index: 0,
routes: [
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
],
};
_handleIndexChange = index => this.setState({ index });
_renderTabBar = props => {
const inputRange = props.navigationState.routes.map((x, i) => i);
return (
<View style={styles.tabBar}>
{props.navigationState.routes.map((route, i) => {
const color = Animated.color(
Animated.round(
Animated.interpolate(props.position, {
inputRange,
outputRange: inputRange.map(inputIndex =>
inputIndex === i ? 255 : 0
),
})
),
0,
0
);
return (
<ImageBackground
source={{uri: "https://cdn.pixabay.com/photo/2015/07/27/19/47/turtle-863336__340.jpg"}}
style={{flex:1}}
>
<TouchableOpacity
style={styles.tabItem}
onPress={() => this.setState({ index: i })}>
<Animated.Text style={{ color }}>{route.title}</Animated.Text>
</TouchableOpacity>
</ImageBackground>
);
})}
</View>
);
};
_renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
});
render() {
return (
<TabView
navigationState={this.state}
renderScene={this._renderScene}
renderTabBar={this._renderTabBar}
onIndexChange={this._handleIndexChange}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
tabBar: {
flexDirection: 'row',
paddingTop: 24,
},
tabItem: {
flex: 1,
alignItems: 'center',
padding: 16,
},
});