Professional Documents
Culture Documents
import { SafeAreaView,
Text,ImageBackground,StatusBar,ScrollView,useWindowDimensions,FlatList,Pressable,To
uchableOpacity,Image,View,Dimensions ,StyleSheet} from 'react-native';
import { TabView, SceneMap,TabBar } from 'react-native-tab-view';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import LinearGradient from 'react-native-linear-gradient';
import {Picker} from "@react-native-picker/picker"
function FirstRoute() {
const images = [
return(
<View style={styles.browseScreenAvatarFlatlist}>
<Image
style={[styles.browserScreenAvatarImage]}
resizeMode='contain'
source={require("../assets/images/Episode1.png")}
></Image>
</View>
<View style={styles. browseScreenTextElement}>
<Text style={styles.avatarText}>{images[0].name}</Text>
</View>
<View style={styles. browseScreenTittleTextElement}>
<Text style={styles.tittleText}>{images[0].title}</Text>
</View>
</View>
);
function click(avatar) {
navigation.navigate('BrowserChildScreen',{avatar})
}
}
return (
<ScrollView>
<ScrollView vertical style={styles.screenBody} >
<SafeAreaView style={styles.homeScreenContainer}>
<StatusBar hidden/>
<ImageBackground source={require('../assets/images/Episode.png')}
style={styles.TempImage}>
<LinearGradient
colors={['black','transparent' ,'transparent','black']}
style={{
position: 'absolute',
left: 0,
right: 0,
top: 0,
height: '100%'
}}
/>
<MaterialIcons name="arrow-back-ios" size={25} color="#fff"
style={styles.leftIcon} />
<MaterialIcons name="bookmark-outline" size={25} color="#fff"
style={styles.bookMarkIcon} />
<View style={styles.backgroundTextContainer}>
<Text style={styles. backgroundJapaneseText}>
{background[0].japanese}
</Text>
<Text style={styles. backgroundTitleText}>
{background[0].title}
</Text>
<Text style={styles. backgroundJapaneseText}>
{background[0].text}
</Text>
</View>
<Text style={styles.SeriesText}>
Series
</Text>
</ImageBackground>
<View style={styles.lineViewContainer}>
<View style={styles.lineStyle}/>
<View style={{flex:1,flexDirection:'row'}}>
<Text style={styles.showDetailText}>5 Seasons</Text>
<Text style={styles.showDetailText}>70 Episodes</Text>
<Text style={styles.showDetailText}>Spring 2013</Text>
</View>
<View style={styles.lineStyle}/>
</View>
<View>
<Pressable style={styles.nextButton}>
</SafeAreaView>
</ScrollView>
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
renderTabBar={renderTabBar}
initialLayout={{ width: layout.width }}
navigation={navigation }
style={{flex:1,height:300}}
/>
</ScrollView>
);
}
width: '100%',
height: '100%',
backgroundColor: '#000',
},
homeScreenContainer:{
backgroundColor:'#000',
flex: 1,
},
textOverImage:{
fontWeight: 'bold',
color: 'white',
position: 'absolute', // child
bottom: 0, // position where you want
left: 0
},
lineViewContainer:{
marginHorizontal:20
},
lineStyle:{
flex:1,
height:1,
backgroundColor:'rgba(255, 255, 255, 0.4)',
marginVertical:20
},
backgroundTextContainer:{
position: 'absolute',
left: 20,
bottom: 20,
},
backgroundTitleText:{
fontSize:24,
color:'#fff',
fontWeight: 'bold',
},
backgroundJapaneseText:{
fontSize:16,
color:'#fff',
fontWeight: 'bold',
},
readMoreText:{
fontSize:14,
fontFamily:'serif',
color: '#fff',
marginTop:0,
fontWeight: 'bold',
marginHorizontal:20
},
DescriptionText:{
fontSize:14,
fontFamily:'serif',
color: 'rgba(255, 255, 255, 0.8)',
marginTop:20,
marginHorizontal:20
},
nextButton: {
flexDirection:'row',
backgroundColor: '#F9CB24',
borderRadius: 8,
alignItems:'center',
width: 320,
height: 44,
marginTop: 10,
marginLeft: 20,
marginRight: 20,
},
buttonText: {
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
fontFamily: 'serif',
fontSize: 16,
color: '#101010',
fontWeight: 'bold',
letterSpacing: 0.02,
marginLeft:124,
},
TempImage:{
height: 480,
width:360,
},
showDetailText:{
fontSize:14,
fontFamily:'serif',
color: 'rgba(255, 255, 255, 0.8)',
marginRight:55
},
outerCircle:{
marginLeft:92,
},
leftIcon:{
position: 'absolute',
left: 20,
top: 20,
},
bookMarkIcon:{
position: 'absolute',
right: 20,
top: 20,
},
SeriesText:{
position: 'absolute',
right: 20,
bottom: 20,
color:'#58FFF9',
fontSize:14,
fontWeight: 'bold'
},
contentView:{
marginHorizontal:20,
borderColor:'#58FFF9',
borderWidth:1,
borderRadius:8,
alignItems:'center',
marginTop:40,
flexDirection:'row'
},
contentText:{
color:'#58FFF9',
fontSize:16,
marginHorizontal:20,
marginVertical:15
},
browseScreenTextElement:{
left:60,
textDecorationLine:'line-through'
},
browseScreenTittleTextElement:{
bottom:218,
left:60,
alignItems:'flex-start'
},
tittleText:{
color:'#fff',
fontFamily:'serif',
fontSize:16,
letterSpacing:0,
right:40,
justifyContent:'center',
alignItems:'center',
},
avatarText:{
color:'#fff',
fontFamily:'serif',
fontSize:12,
letterSpacing:0,
right:40,
justifyContent:'center',
alignItems:'center',
},
browseScreenBody: {
position: 'absolute',
width: '100%',
height: '100%',
backgroundColor: '#101010',
},
browserScreenAvatarImage:{
flex:1,
width: 216,
height: 148,
margin:0,
borderRadius:8,
justifyContent: 'center',
alignItems: 'center',
resizeMode: 'contain',
},
browseScreenAvatarFlatlist:{
height:250,
width:250,
flex: 1,
top:25,
padding:1,
flexDirection: 'row',
margin:10,
resizeMode: 'contain',
},
}
)