This is Code but not working for me.
return (
<View style={styles.spinnerStyle}>
<ActivityIndicator
animating={true}
size='large'
/>
</View>
);
This styling is for showing ActivityIndicator on center of page.
<View style={{
display:"flex",
flex:1,
justifyContent:"center",
alignItems:"center"
}}>
<ActivityIndicator
animating={true}
size='large'
/>
</View>
Related
I have an weather app in react native that uses react-native-app-intro-slider that is basically a vertical FlatList. This is my App render
return (
<AppIntroSlider style = {{backgroundColor:'#4c669f'}}
renderItem = {_renderItem}
data = {dataToRender}
showDoneButton = {false}
showPrevButton = {false}
showNextButton = {false}/>
)
And the Slider items that i'm rendering look like this
_renderItem = ( {item} ) => {
return (
<View style={{flex:1}}>
<Text style={{fontSize:20, marginTop:20, color:'white',fontSize:25, alignSelf:'center'}}>{item.name}</Text>
<View style={{ flexDirection:'row', marginTop:15, alignItems:'center', justifyContent:'center'}}>
<Image source={{uri: 'http://openweathermap.org/img/wn/' + item.icon + '#2x.png'}} style={{width:90, height:90}}/>
<Text style={{color:'white', fontSize:60}}>{`${_.round(item.temp)}°C`}</Text>
</View>
<View>
<Text style={{alignSelf:'center', justifyContent:'center', color:'white', fontSize:20}}>{item.clouds}</Text>
<View style={{display:'flex', alignItems:'flex-start', marginLeft:40 }}>
<View style={{ marginTop:40, flexDirection:'row'}}>
<Icon name='wind' size={28}/>
<Text style={{marginLeft:5, fontSize:22, color:'white'}}>{item.wind} km/h</Text>
</View>
<View style={{ marginTop:10, flexDirection:'row'}}>
<Icon name='temperature-low' size={28} />
<Text style={{marginLeft:5, fontSize:22, color:'white'}}>{_.round(item.temp_min,1)} °C</Text>
</View>
<View style={{ marginTop:10, flexDirection:'row' }}>
<Icon name='temperature-high' size={28} />
<Text style={{marginLeft:5, fontSize:22, color:'white'}}>{_.round(item.temp_max,1)} °C</Text>
</View>
<View style={{ marginTop:10, flexDirection:'row' }}>
<Icon name='compress-alt' size={28} />
<Text style={{marginLeft:5, fontSize:22, color:'white'}}>{item.air_pressure} hPa</Text>
</View>
</View>
</View>
<View>
<FlatList
data={dataToRender16}
renderItem={renderFlatListItem}/>
</View>
</View>
);
}
And the issue is that the FlatList in the rendered item (in the second code snippet) is not scrolling down, I've tried changing some styles but none of that worked
First of your dataToRender16 must have some unique id ,and you must add keyExtractor to your FlatList.
checkout the following example:
<FlatList
keyExtractor={(item, index) => item.id}
data={dataItems}
renderItem={itemData => (
<ItemComponent
id={itemData.item.id}
onDelete={removeItemHandler}
title={itemData.item.value}
/>
)}
/>
Adding flex:1 to styles of the that FlatList is netsted is solved the issue
<View style={{flex:1, alignItems:'center', paddingTop:50}}>
<FlatList
data={dataToRender16 }
renderItem={renderFlatListItem}/>
</View>
Hey
I have my bottom bar out the Scroll View component,But it still scroll with the other components.
How can i make it fixed ?
"
<SafeAreaView styles={SafeViewAndroid.AndroidSafeArea}>
<View style={{ backgroundColor: "#fff", padding: 15 }}>
<HeaderTabs activeTab={activeTab} setActiveTab={setActiveTab} />
<SearchBar cityHandler={setCity} />
</View>
<ScrollView showsVerticalScrollIndicator={false}>
<Categories />
<RestaurantItems restaurantData={restaurantData} />
</ScrollView>
<Divider width={1} />
<BottomTabs />
</SafeAreaView>
"
Entire Code Screen
You can use flex proportions to separate the and components, as below
<SafeAreaView styles={SafeViewAndroid.AndroidSafeArea}>
<View style={{ backgroundColor: "#fff", padding: 15, flex : 1 }}>
<HeaderTabs activeTab={activeTab} setActiveTab={setActiveTab} />
<SearchBar cityHandler={setCity} />
</View>
<View style= {{flex : 3 }}>
<ScrollView showsVerticalScrollIndicator={false}>
<Categories />
<RestaurantItems restaurantData={restaurantData} />
</ScrollView>
</View>
<View style= {{flex : 1 }}>
<Divider width={1} />
<BottomTabs />
</View>
</SafeAreaView>
You can do it by styling your button component as -
<TouchableOpacity
style={{
width: 60,
height: 60,
backgroundColor: 'red',
position: 'absolute',
bottom: 50,
justifyContent: 'center',
alignItems: 'center',
}}
onPress={() => {
console.log('Button Pressed')
}}
>
<Text>Hello Bottom Button</Text>
</TouchableOpacity>
I've been trying to make a simple app, and I want some comment section that I create with flatlist, but after I create some component below my flatlist it won't appear, but the height of it appears, it just the component itself won't appear, after I'm trying to comment my flatlist, the component below it showed up.
Can you give me solution for this problem? so stuck with it
<View
style={{
alignItems: 'center',
flex: 1,
}}>
<FlatList
data={Comment}
keyExtractor={Comment.id}
renderItem={renderItem}
removeClippedSubviews={true}
scrollEnabled={false}
/>
</View>
</View>
<View>
<Timeline data={data} />
</View>
</View>
<!-- end snippet -->
Try this way
<View style={{ flex: 1 }}>
<View
style={{
alignItems: "center",
flex: 1,
}}
>
<FlatList
data={Comment}
keyExtractor={Comment.id}
renderItem={renderItem}
removeClippedSubviews={true}
scrollEnabled={false}
/>
</View>
<View>
<Timeline data={data} />
</View>
</View>
I'm trying to make use of the buttons on my app, but apparently they don't work on a physical device, I cannot press them. In the simulator it is indeed possible to press them, but not sure why not in the physical device.
This is the following code I'm using:
<ScrollView refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh}
/>
}>
<View style={{ padding: 20, flexDirection: 'row' }}>
<TouchableOpacity onPress={() => console.log("the button works.")}>
<View style={styles.addHomework}>
<Text style={{ color: 'white' }}>Add Homework</Text>
</View>
</TouchableOpacity>
<View style={{ paddingLeft: 3 }}>
<TouchableOpacity onPress={() => this.removeSubject()}>
<View style={styles.removeSubject}>
<Text style={{ color: 'white' }}>Remove Subject</Text>
</View>
</TouchableOpacity>
</View>
</View>
If someone touches the view, there have to be opened a different page. But in this view there is also a image and text. So I have searched for it on the internet, but I couldn't find a good solution.
I have tried to place a button in the view, but it doesn't work.
export default class HomeScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.containerbetween}>
<View style={[styles.box, styles.box1]}>
<Image
style={styles.image}
source={require('../assets/images/Pooplog.png')}
/>
<Text style={styles.white}>Poep log</Text>
</View>
<View style={[styles.box, styles.box2]}>
<Image
style={styles.image}
source={require('../assets/images/Agenda.png')}
/>
<Text style={styles.white}>Kalender</Text></View>
</View>
<View style={styles.containerbetween}>
<View style={[styles.box, styles.box3]}>
<Image
style={styles.image}
source={require('../assets/images/Analyse.png')}
/>
<Text style={styles.white}>Analyse</Text></View>
<View style={[styles.box, styles.box4]}>
<Image
style={styles.image}
source={require('../assets/images/Tips.png')}
/>
<Text style={styles.white}>Tips en weetjes</Text></View>
</View>
</View>
)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Use TouchableOpacity:
<TouchableOpacity onPress={()=> {//navigate here}} style={[styles.box, styles.box1]}>
<Image
style={styles.image}
source={require('../assets/images/Pooplog.png')}
/>
<Text style={styles.white}>Poep log</Text>
</TouchableOpacity>