I am importing a custom component (RecipeCard) and it isn't appearing on the screen.
I'm fairly certain it is to do with the styling that I am currently using.
The fastimage component works exactly as the RN component does and can be seen here.
Any help is appreciated!
File1
<View style={styles.container}>
<Head
headerText={this.props.type}
navigation={this.props.navigation}
backButton
/>
<FlatList
data={this.state.data}
renderItem={({ item }) => <RecipeCard {...item} />}
/>
</View>
const styles = {
container: {
flex: 1
}};
RecipeCard
<FastImage
style={styles.imageStyle}
source={{ uri: this.props.image }}
>
<View style={styles.titleContainer}>
<Text style={styles.titleText}>
{this.props.title}
</Text>
<Text style={styles.subtitleText}>
{this.props.subtitle}
</Text>
</View>
</FastImage>
const styles = StyleSheet.create({
imageStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: 'transparent',
},
titleContainer: {
position: 'absolute',
marginTop: 15,
zIndex: 2,
bottom: 13,
flex: 1,
width: '100%',
height: 70,
flexDirection: 'column',
alignItems: 'flex-start',
},
titleText: {
color: 'white',
fontWeight: '800',
paddingLeft: 5,
paddingTop: 10
},
subtitleText: {
color: '#adadad',
fontWeight: '500',
paddingLeft: 5,
paddingTop: 5,
}
});
Try to add the resizeMode to the FastImage:
resizeMode={FastImage.resizeMode.contain}
It's also described in the docs of FastImage:
import FastImage from 'react-native-fast-image'
const YourImage = () =>
<FastImage
style={styles.image}
source={{
uri: 'https://unsplash.it/400/400?image=1',
headers:{ Authorization: 'someAuthToken' },
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.contain}
/>
I tried the example you have given above, I was able to see the image with a little change in imageStyle, just added height and it was showing the images.
RecipeCard component
const RecipeCard = (props) => {
return (
<FastImage
style={styles.imageStyle}
source={{ uri: 'https://unsplash.it/400/400?image=1' }}
>
<View style={styles.titleContainer}>
<Text style={styles.titleText}>
{props.title}
</Text>
<Text style={styles.subtitleText}>
{props.subtitle}
</Text>
</View>
</FastImage>
);
}
In imageStyle I have added height
imageStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: 'transparent',
height: 200
},
Hope this helps!
Related
TL;DR
It is uncertain that when will the audio file be fetched and given to the trackplayer. So i need a way that will detect the change that the file has been fetched and duration value is now available. I tried playing around with Async/await but it still fails to deliver the duration value on time to the slider.
I am developing an RN app that can stream the audio files that are currently stored in my firebase storage. I am facing difficulty in updating the slider's maximumValue. Since the song takes a couple of seconds to get fetched from firebase, the (total) duration value of the song file given by the react-native-track-player is undefiend and consequently the play button's onPress function setState(duration) sets the new tracklength state as undefined. And this is set as the maximumValue for the slider, which in turn gives the error as shown in the screenshot.
What can i do such that, when the TrackPlayer.getState() (a method from the ProgressComponent) changes its value to 'playing' or 'Ready', the application automatically rerenders with the correct duration value without giving the error.
I have used React-native-slider and React-native-Track-player
/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import { Text, View, Image, SafeAreaView, TouchableOpacity, Platform, StatusBar, Dimensions, Modal, Button } from 'react-native';
import Slider from 'react-native-slider';
import Moment from 'moment';
import DeviceInfo from 'react-native-device-info';
import { FontAwesome5, Feather, Entypo } from '#expo/vector-icons';
import { Surface, Card, Badge } from 'react-native-paper';
import TrackPlayer, { ProgressComponent, getPosition } from 'react-native-track-player';
import storage from '#react-native-firebase/storage';
export default class MusicPlayer extends ProgressComponent {
componentWillMount() {
TrackPlayer.setupPlayer().then(async () => {
await TrackPlayer.add({
// url: 'https://sampleswap.org/mp3/artist/5101/Peppy--The-Firing-Squad_YMXB-160.mp3',
url: (await storage().ref('Songs/01 - Luck Aazma - www.downloadming.com.mp3').getDownloadURL()).toString(),
});
}
).then(console.log('aaaaaaaaaaaaaaaaaaaaaaa ' + this.getS().then(res => console.log(res))));
// .then(async () => {
// var dur = (await TrackPlayer.getDuration()).toString();
// this.setState({ trackLength: dur });
// });
// const temp = await TrackPlayer.getState();
// if (temp === TrackPlayer.STATE_READY) { console.log('its ready here') }
}
// componentDidMount() {
// this.interval = setInterval(
// () => {
// this.forceUpdate;
// }, 3500
// );
// }
// componentWillUnmount() {
// clearInterval(this.interval);
// }
constructor(props) {
super(props);
this.state = {
trackLength: 300,
timeElapsed: '0:00',
timeRemaining: '5:00',
optionsVisible: false,
curr_time: 0,
isPlaying: false,
t_state: this.getS(),
};
}
seekTime = seconds => {
this.setState({ timeElapsed: Moment.utc(seconds * 1000).format('m:ss') });
TrackPlayer.seekTo(seconds);
this.setState({ timeRemaining: Moment.utc((this.state.trackLength - seconds) * 1000).format('m:ss') });
};
setCurr = seconds => {
return Moment.utc(seconds * 1000).format('m:ss');
};
getS = async () => {
return await TrackPlayer.getState();
}
render() {
return (
<SafeAreaView style={{ backgroundColor: '#2d545e', flex: 1, paddingTop: (DeviceInfo.hasNotch && Platform.OS === 'android') ? StatusBar.currentHeight : 0 }}>
<View style={{ margin: 3, flex: 1 }}>
<TouchableOpacity
style={{ alignSelf: 'flex-end', marginRight: 10 }}
onPress={this.toggleOverlay} >
<Entypo name="dots-three-vertical" size={24} color="white" />
</TouchableOpacity>
{/* playlist name and album name */}
<View style={{ alignItems: 'center', marginTop: -25 }}>
<Text style={{ color: '#FFFFFF', fontSize: 10 }}>PLAYLIST</Text>
<Text style={{ color: '#FFFFFF', fontFamily: 'sans-serif', fontWeight: '500' }}>Album_name_here</Text>
</View>
{/* song image/ thumbnail zone */}
<Surface raised style={{ marginTop: 30, height: 200, width: 200, alignSelf: 'center', elevation: 50, borderRadius: 30 }}>
<Image source={{ uri: 'https://a10.gaanacdn.com/images/albums/61/161/crop_480x480_161.jpg' } || require('../../assets/images/temp.jpeg')} style={{ height: 200, width: 200, borderRadius: 30, alignSelf: 'center' }} />
</Surface>
{/* song name and artist name */}
<View style={{ marginTop: 25, flexDirection: 'column', alignItems: 'center' }}>
<Text style={{ color: '#FFFFFF', fontFamily: 'sans-serif', fontWeight: 'bold', fontSize: 20 }}>Song_Name_here</Text>
<Text style={{ color: '#FFFFFF', fontFamily: 'sans-serif', fontWeight: '500', marginTop: 3 }}>artist_name_here</Text>
</View>
{/* slider component only */}
<View style={{ flexDirection: 'column', alignItems: 'center', marginTop: 8 }}>
<Slider
minimumValue={0}
value={this.state.position}
animationType="timing"
maximumValue={this.state.trackLength}
trackStyle={{ width: Dimensions.get('screen').width - 50, height: 4 }}
thumbStyle={{ height: 20, width: 20, backgroundColor: '#fff' }}
thumbTouchSize={{ width: 100, height: 40 }}
minimumTrackTintColor="#000000"
onSlidingComplete={seconds => { console.log(seconds); this.seekTime(seconds); }}
/>
<View style={{ width: Dimensions.get('screen').width - 35, backgroundColor: '#', flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={{ flex: 1 }}>{this.setCurr(this.state.position)}</Text>
<Text style={{ alignSelf: 'flex-end' }}>{this.setCurr(this.state.trackLength)}</Text>
</View>
</View>
{/* repeat, back, play, forward and shuffle button */}
<View style={{ width: '95%', height: 70, backgroundColor: '#', alignSelf: 'center', margin: 15, flexDirection: 'row' }}>
<TouchableOpacity style={{ flex: 1, height: 30, width: 10, alignSelf: 'center', justifyContent: 'space-between', alignItems: 'center' }}>
<Feather
name="repeat"
size={30}
color="#000000"
style={{ alignItems: 'center' }}
/>
</TouchableOpacity>
<TouchableOpacity style={{ flex: 1, height: 30, width: 10, alignSelf: 'center', justifyContent: 'space-between' }} onPress={() => TrackPlayer.skipToPrevious()}>
<FontAwesome5 name="backward" size={32} color="#242320" style={{ alignSelf: 'center' }} />
</TouchableOpacity>
{
// this.state.t_state === TrackPlayer.STATE_READY &&
!this.state.isPlaying && <TouchableOpacity
style={{ flex: 1, height: 50, alignSelf: 'center', justifyContent: 'space-between', alignItems: 'center' }}
onPress={async () => {
TrackPlayer.play().then(this.setState({ isPlaying: true })).then(async () => {
var dur = (await TrackPlayer.getDuration()).toString();
this.setState({ trackLength: dur });
});
}}
>
<FontAwesome5
name="play"
size={38}
color="#000000"
style={{ marginTop: 5 }}
/>
</TouchableOpacity>}
{this.state.isPlaying && <TouchableOpacity style={{ flex: 1, height: 50, alignSelf: 'center', justifyContent: 'space-between', alignItems: 'center' }} onPress={() => TrackPlayer.pause().then(this.setState({ isPlaying: false }))}>
<FontAwesome5
name="pause"
size={38}
color="#000000"
style={{ marginTop: 5 }}
/>
</TouchableOpacity>}
<TouchableOpacity style={{ flex: 1, height: 30, width: 10, alignSelf: 'center', justifyContent: 'space-between' }} onPress={() => TrackPlayer.skipToNext()}>
<FontAwesome5 name="forward" size={32} color="#242320" style={{ alignSelf: 'center' }} />
</TouchableOpacity>
<TouchableOpacity style={{ flex: 1, height: 30, width: 10, alignSelf: 'center', justifyContent: 'space-between', alignItems: 'center' }}>
<Entypo
name="shuffle"
size={30}
color="#000000"
style={{ alignItems: 'center' }}
/>
</TouchableOpacity>
</View>
{/* up next section */}
<Surface raised style={{ width: '95%', backgroundColor: 'black', alignSelf: 'center', height: 70, borderRadius: 10, marginTop: 5 }}>
<Card.Title
style={{ backgroundColor: 'white', flex: 1, borderRadius: 10 }}
title={'Song Name here'}
titleStyle={{ margin: 25, padding: 0 }}
left={() =>
<Image
style={{ width: 50, height: 50, borderRadius: 10, alignSelf: 'flex-start', alignItems: 'flex-start' }}
source={require('../../assets/images/temp.jpeg')}
/>
}
leftStyle={{ alignItems: 'flex-start', margin: -10, padding: 0 }}
right={() => <Badge children={'Next'} size={30} style={{ width: 70, backgroundColor: 'black', borderRadius: 5, marginRight: 10 }} />}
/>
</Surface>
</View>
</SafeAreaView>
);
}
}
Sorry for the messy code but the comments would help a bit in navigating to the main parts like Slider and Play Button
Error:
My Error from the slider
For those who might require an answer to this, I solved the problem using React Hooks. React Native Track Player has a v2 update, in which the converting the above class component to functional component did the trick. It gives a rather accurate results then before. Refer to the docs here.
I'm building an app which uses the Map method to build several different components. I have a scrollview which contains the whole page. Currently, the scrollView won't expand to contain everything despite trying what is seemingly every bit of advice online.
I have tried having the scrollview be inside another view but that still doesn't work as well as a combination of different flex configurations. Does anyone know why this page in particular isn't working. I have compared it to other pages and there is seemingly no reason as to why the flex does not extend.
Thanks
render(){
return (
<ScrollView contentContainerStyle={{flexGrow: 1}} >
<View style={styles.pageContainer}>
<View style={styles.photoShowcase }>
{
this.state.images.map((item, key) => (
<Image key = {key} source={{uri: item}} style = {{width: 200, height: 200}} />
))
}
</View>
<View style = {styles.cameraContainer}>
<TouchableHighlight onPress={this.handleChoosePhoto}>
<Icon type='font-awesome' name='photo' size={60} />
</TouchableHighlight>
<Icon type='font-awesome' name='camera' size={120} />
<Icon type='font-awesome' name='map-o' size={60} />
</View>
<View style= {styles.detailsContainer}>
<View >
<TextInput onChangeText={(text) => {this.setState({title: text})}} style = {styles.title} >New Day Title </TextInput>
</View>
<View style = {styles.description}>
<TextInput onChangeText={(text) => {this.setState({description: text})}} multiline={true}>Description for the text goes here</TextInput>
</View>
</View>
<View style = {styles.friendsContainer}>
<View>
<Text style = {styles.friendsSectionTitle}>I spent today with: </Text>
</View>
<ScrollView horizontal= {true}>
<View style={styles.peopleContainer}>
{
this.state.friends.map((item, key) => (
<View key={key} >
<TouchableHighlight >
<PersonEntryBox name={item.name} backgroundImageToUse={item.image} style = {styles.smallBox} functionToRun = {() => {this.state.selectedFriends.push(item)}} />
</TouchableHighlight>
</View>
))
}
</View>
</ScrollView>
</View>
<View style={{height: '40%', width: '100%'}}>
<MapView
style={{...StyleSheet.absoluteFillObject}}
initialRegion={{
latitude: 45.5209087,
longitude: -122.6705107,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
onPress={this.handlePress}
>
{this.state.markers.map((marker) => {
return (
<Marker {...marker} >
<View style={styles.marker}>
<Text style = {styles.markerText}>{marker.cost}</Text>
</View>
</Marker>
)
})}
</MapView>
</View>
<View style = {styles.ratingsButtonContainer}>
<RateTheDayBox style={styles.badDay} dayRating="Bad" onClick={() => {this.state.rating ="red"; this.storeDay()}}></RateTheDayBox>
<RateTheDayBox style={styles.okayDay} dayRating="Okay" onClick={() => {this.state.rating = "yellow"; this.storeDay()}}></RateTheDayBox>
<RateTheDayBox style={styles.greatDay} dayRating="Great" onClick={() => {this.state.rating = "green"; this.storeDay()}}></RateTheDayBox>
</View>
</View>
</ScrollView>
);
}}
const styles = StyleSheet.create({
pageContainer: {
paddingTop: 50,
alignItems: 'center',
flex: 1,
},
mapContainer:{
flex: 1,
},
marker: {
backgroundColor: "#550bbc",
padding: 5,
borderRadius: 5,
},
text: {
color: '#FFF',
fontWeight: "bold",
},
photoShowcase: {
flex: 1,
flexDirection: 'row',
alignItems: 'flex-start',
justifyContent: 'flex-end',
zIndex: 0,
height: 200
},
cameraContainer: {
flexDirection: 'row',
paddingTop:20,
paddingLeft: '5%',
paddingRight: '5%',
width: '100%',
height: '25%',
alignItems: 'center',
justifyContent: 'space-around',
},
iconStyles: {
marginLeft: 10,
color: 'red',
},
detailsContainer: {
width: '100%',
height: '35%',
},
title: {
paddingLeft: 10,
fontSize: 40,
textDecorationLine: 'underline',
},
description: {
paddingLeft: 11,
paddingTop: 10,
},
friendsContainer: {
width: '100%',
height: '20%',
},
boxContainers: {
flexDirection: 'row',
},
friendsSectionTitle: {
paddingLeft: 10,
fontSize: 30,
},
ratingsButtonContainer: {
width: '100%',
height: '20%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between'
},
badDay: {
backgroundColor: 'red',
},
okayDay: {
backgroundColor: 'yellow',
},
greatDay: {
backgroundColor: 'green',
},
peopleContainer: {
paddingTop: 10,
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
alignItems: 'center' ,
width: '100%',
height: '100%',
},
});
EDIT: For anyone suffering from the same issue, REMOVE PERCENTAGES FROM HEIGHTS. This fixed this issue for me.
Maybe just use style instead of contentContainerStyle ? the doc says :
These styles will be applied to the scroll view content container which wraps all of the child views
So maybe here is your problem, you're not applying the flexGrow to the scrollView but to its wrapper
I need to align 2 svg icons and a view with some text to the baseline, but as you can see from the snapshot it's not working.
This is the result that I want:
This is the code:
<View style={styles.header}>
<TouchableOpacity onPress={() => navigation.openDrawer()} style={{marginRight: 20}}>
<MenuIcon />
</TouchableOpacity>
<View>
<Text style={styles.date}>24 ottobre 2019</Text>
<Text style={styles.title}>Compiti</Text>
</View>
<TouchableOpacity onPress={() => navigation.navigate({routeName: 'Calendary'})} style={{position: 'absolute', right:0}}>
<CalendarIcon width={50} height={50} />
</TouchableOpacity>
</View>
and this is the style
const styles = StyleSheet.create({
header: {
flex: 1,
flexDirection: 'row',
alignItems: 'baseline',
},
date: {
color: '#C8C8C8',
fontSize: 15
},
title: {
fontSize: 40,
fontWeight: '400',
color: '#454545',
},
});
Your header style should be as following :
header: {
flex: 1,
flexDirection: 'row',
alignItems: 'center', // add center instead of flex-end
}
I can't get my app to fill the whole screen. Whatever i do, there is always a white bar on the bottom of the page. It's so strange because it works on some devices but not others. i'm going crazy over this!
Ive tried const { height, width } = Dimensions.get('window'); and setting the app height with that, and it actually worked once, but now i can't get it to work again. ive tried rewrapping everything in different ways, with different views and scrollviews.
ps.: i removed all functions and useless code so it's not too much code, but
here is my code
import React, { Component } from 'react';
import {
View,
Switch,
Text,
TextInput,
TouchableOpacity,
ImageBackground,
Image,
Linking,
StatusBar,
Dimensions,
} from 'react-native';
import { ScaledSheet } from 'react-native-size-matters';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
export default class App extends Component {
constructor() {
super();
};
}
render() {
return (
<View style={styles.container}>
<KeyboardAwareScrollView
keyboardShouldPersistTaps={'always'}
style={styles.teste}
showsVerticalScrollIndicator={false}>
<StatusBar backgroundColor="#50a9f3" />
<ImageBackground source={require('./background.png')} style={styles.imagemBackground}>
<View style={styles.campos}>
<Image
style={{ width: 110, height: 110, alignSelf: 'center' }}
source={require('./logo.png')}
/>
<View style={styles.item}>
<Text style={styles.texto}>M²s do ambiente</Text>
<TextInput
style={styles.inputText}
keyboardType={'phone-pad'}
underlineColorAndroid={'white'}
onChangeText={mQuadrado => this.setState({ mQuadrado })}
/>
</View>
<View style={styles.item}>
<Text style={styles.texto}>Nº de pessoas</Text>
<TextInput
style={styles.inputText}
keyboardType={'phone-pad'}
underlineColorAndroid={'white'}
onChangeText={pessoas => this.setState({ pessoas })}
/>
</View>
<View style={styles.item}>
<Text style={styles.texto}>Nº de eletrodomésticos</Text>
<TextInput
style={styles.inputText}
keyboardType={'phone-pad'}
underlineColorAndroid={'white'}
onChangeText={eqps => this.setState({ eqps })}
/>
</View>
<View style={styles.item}>
<Text style={styles.texto}>Nº de janelas </Text>
<TextInput
style={styles.inputText}
keyboardType={'phone-pad'}
underlineColorAndroid={'white'}
onChangeText={jnls => this.setState({ jnls })}
/>
</View>
<View style={styles.switch}>
<Text style={styles.texto}>Recebe luz solar </Text>
<Switch
style={{ transform: [{ scaleX: 0.9 }, { scaleY: 0.9 }] }}
thumbColor="#ffffff"
trackColor={{ true: '#c0c0c0' }}
value={this.state.switch}
onValueChange={value => this.setState({ switch: value })}
/>
</View>
<View style={styles.input}>
<TouchableOpacity style={styles.opacity} onPress={this.calcular}>
<Text style={styles.textoCalcular}>CALCULAR</Text>
</TouchableOpacity>
</View>
<View style={styles.resultadoBox}>
<Text style={styles.textoResultado}>Você precisará de</Text>
<Text style={styles.resultado}>{btu == '0' ? null : btu + '.000 BTUS'}</Text>
</View>
</View>
<View style={styles.banner}>
<TouchableOpacity
style={styles.bannerContainer}
onPress={() => Linking.openURL('https://matum.com.br/produtos-sisum/')}>
<Text style={styles.bannerTexto}>Gerencie suas manutenções preventivas e corretivas</Text>
<Text style={styles.bannerTexto}>Relatório PMOC simples</Text>
<Text style={styles.bannerTextoX}>Saiba mais</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</KeyboardAwareScrollView>
</View>
);
}
}
const { height, width } = Dimensions.get('window');
const heightCerto = height - StatusBar.currentHeight;
const styles = ScaledSheet.create({
container: {
flex: 1,
},
teste: {
flex: 1,
},
imagemBackground: {
flex: 1,
},
campos: {
flex: 95,
justifyContent: 'flex-start',
alignItems: 'stretch',
padding: '20#s',
paddingTop: '12#s',
},
item: {
flex: 1,
},
switch: {
paddingTop: '15#s',
flexDirection: 'row',
justifyContent: 'flex-start',
flex: 1,
},
textoCalcular: {
fontSize: '15#s',
color: '#ffffff',
textShadowColor: 'black',
textShadowRadius: 2,
},
input: {
padding: '20#s',
alignItems: 'center',
flex: 1,
},
opacity: {
backgroundColor: '#50a9f3',
borderWidth: '1.5#s',
borderRadius: '10#s',
borderColor: '#000000',
width: '190#s',
height: '39#s',
justifyContent: 'center',
alignItems: 'center',
},
resultadoBox: {
flex: 2,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(100,100,100,0.5)',
margin: 0,
borderColor: 'rgba(100,100,100,0.5)',
borderRadius: '10#s',
},
resultado: {
fontSize: '28#s',
color: 'white',
textShadowColor: 'black',
textShadowRadius: 5,
},
banner: {
flex: 10,
backgroundColor: 'rgba(140,140,140,0.5)',
margin: 0,
borderColor: '#50a9f3',
borderWidth: '1.5#s',
borderRadius: '10#s',
alignSelf: 'stretch',
},
bannerContainer: {
alignItems: 'center',
},
bannerTexto: {
color: '#ffffff',
fontSize: '12#s',
},
bannerTextoX: {
color: '#50a9f3',
fontSize: '10#s',
textShadowColor: 'black',
textShadowRadius: 4,
},
inputText: {
fontSize: '12#s',
color: 'white',
textShadowColor: 'black',
textShadowRadius: 5,
height: '38#s',
},
texto: {
fontSize: '13#s',
color: '#ffffff',
textShadowColor: 'black',
textShadowRadius: 5,
},
textoResultado: {
fontSize: '16#s',
color: 'white',
textShadowColor: 'black',
textShadowRadius: 5,
},
});
I think you're talking about the image background but not totally sure. I was able to get it to stretch to the full height by adding the following height declaration:
imagemBackground: {
flex: 1,
height: height,
},
link to example: https://snack.expo.io/r1Y-zpwMH
You are using flex:1 many times in style that is the problem.
please give flex:1 in container style and remove all flex:1 in other styles instead of flex:1 you can use width and height in percentage.
like style={{width:'100%',height:'40%'}}.
Thank you!
Image here.
App
Code
I just want Advice component close to Weather component.
How can I get it ?
App.js
<View style={styles.columnLayout}>
<Weather currentCity="Phuket"/>
<Advice />
</View>
const styles = StyleSheet.create({
columnLayout : {
flex : 1,
flexDirection: 'column',
}
})
Weather and Advice component are not using flex.
WeatherData.js (export to Weather.js)
<View style={styles.viewStyle}>
<View style={styles.dataStyle}>
<Text style={styles.textStyle}>Temperature</Text>
<Text style={styles.textStyle}>{this.props.temp} °C</Text>
</View>
<View style={styles.dataStyle}>
<Image style={{ width: 80, height: 80 }} source={{ uri: `http://openweathermap.org/img/w/${this.props.icon}.png` }}></Image>
<Text style={styles.textStyle}>{this.props.description}</Text>
</View>
<View style={styles.dataStyle}>
<Text style={styles.textStyle}>Humidity</Text>
<Text style={styles.textStyle}>{this.props.humidity} %</Text>
</View>
</View>
const styles = StyleSheet.create({
dataStyle: {
backgroundColor: '#00b377',
flex: 1,
alignItems: "center",
justifyContent: "center"
},
viewStyle: {
height: 150,
flexDirection: "row",
justifyContent: "center"
},
textStyle: {
color: 'white',
textShadowColor: 'rgba(0, 0, 0, 0.75)',
textShadowOffset: {width: -1, height: 1},
textShadowRadius: 10
}
})
another one Component using the same style.
I already add code.
In react-native documents flex : 1 and flexDirection : column all View are adjacent
but mine is not.