i'm using react-native-elements on my new project and decided to use floating action button on home screen. but there is an issue im facing. in home screen there is scrollView and FAB is placing itself to bottom of when i write in scroll. outside of scroll i cant see it. how to solve this problem
this is FAB
readBarcode() {
return (
<View>
<FAB title="Barkod Okut" placement="right" />
</View>
);
}
and this is render
render() {
return (
<View style={Styles.Container}>
{this.readBarcode()}
<ScrollView style={Styles.MainScroll}>
{slider()}
{banner()}
{categoryButtons()}
</ScrollView>
</View>
);
}
this is how i figure it out
this is render
render() {
return (
<View style={Styles.Container}>
<ScrollView style={Styles.MainScroll}>
{slider()}
{banner()}
{categoryButtons()}
</ScrollView>
{this.readBarcode()}
</View>
);
}
and this is FAB
readBarcode() {
return (
<View>
<FAB title="Barkod" placement="left" color="#005F8E" />
</View>
);
}
placement right wont work but when i do it left i work perfectly
Related
I Had this code with sticky component on the header, how can i move this to the bottom, like footer button on instagram (when you open the app, it already stick in the bottom) ? here's my code
function MyApp() {
return (
<ScrollView
stickyHeaderIndices={[0]}
showsVerticalScrollIndicator={false}>
<View>
<MyStickyFooter/>
</View>
<View>
<Text> Hello world </Text>
<Text> 3000 long lorem word </Text>
</View>
</ScrollView>)}
const MyStickyFooter = () => {
return (
<View style={{}}>
<Button> I am a sticky footer </Button>
</View>
)};
You should move out the MyStickyFooter component from your ScrollView.
You should have something like this:
<View style={....}>
<ScrollView>
... components
</ScrollView>
<MyStickyFooter/>
</View>
Why does the following Button not work on android?
render() {
return (
<View>
<View style={{height:50}}>
<Text>if this is here, the button will not work</Text>
</View>
<View>
<Button
title="Confirm"
onPress={() => alert('click')}
/>
</View>
</View>
)
}
When I remove the top view, the button works. (no problems on ios)
render() {
return (
<View>
<View>
<Button
title="Confirm"
onPress={() => alert('click')}
/>
</View>
</View>
)
}
Ok, the part, I posted does work. The cause for my problem was nesting it from another (parent) view.
I got a problem rendering variable 'html'.
I think its because trying to render it before loading ends( error said the variable 'html' is undefined).
is there any modules or something ? (like loading indicator)
return (
<View style={styles.container}>
<ScrollView style={styles.scrollview}>
{lecture_render(get_all_list(html))}
</ScrollView>
</View>
)
I rendered like this, but I want some filter for 'html' variable before render.
You can simply use an ActivityIndicator component from react-native to render a circular loading indicator if your state has been not been set.
import {ActivityIndicator} from 'react-native'
if (html=== "") {
return (
<View>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.container}>
<ScrollView style={styles.scrollview}>
{lecture_render(get_all_list(html))}
</ScrollView>
</View>
);
How do I flex horizontally within a column layout? Currently only half the width of the screen
Here's the current render code:
render() {
const {handle_data} = this.state
if (handle_data.length) {
return (
<ScrollView style={styles.container}>
{
handle_data.map(pack => {
console.log('this.cleanDataForFlatlist(pack): ', this.cleanDataForFlatlist(pack))
return (
<View style={styles.pack}>
<Text style={{fontWeight: 'bold'},{fontSize: 24}}>{pack[0].pack_name}</Text>
<Text style={{fontWeight: 'bold'},{fontSize: 16}}>{pack[0].pack_description}</Text>
<View style={styles.pack}>
<FlatList
data={this.cleanDataForFlatlist(pack)}
keyExtractor={this._keyExtractor}
renderItem={this._renderHandle}
/>
</View>
</View>
)
})
}
</ScrollView>
);
} else {
return null
}
}
Here's what it looks like now
I do not see your code about an item, so I show an example code. your problem is mainly the item render.
// the soruceData is the data souce,in other words, your handle_data
<View style={{flex:1, backgroundColor:'transparent'}} >
<FlatList
data={this.state.sourceData}
renderItem={this._renderItem}
/>
</View>
//the render item method, I suggest you put the item into a pure component
_renderItem = ({ item }) => {
return (
<View style={{flexDirection:'column',width:'92%'}>
id={item.id} // the every item should hava a unique id or key
<ImageView source={{uri:"image url"}} style={{width:,height:}}/>
<Text numberOfLines={1} style={{fontSize: 18,
color: '#353535',}}>"content"</Text>
/>
);
};
you set layout width or height should use flex or percent. in this case, your UI is flexible.
At the same time, I suggest you read felx layout guide
In the end, I suggest you remove the scroll view, move views which algin above the flatList into the flatList ListHeaderComponent. it can avoid the scroll conflict.
We have a FilterComponent which renders a Modal, but on iPhone X it's Header is in the Statusbar.
I tried to render it with SafeAreaView but seems like this is not working:
return (
<SafeAreaView>
<Modal
{ ...defaultModalProps }
onRequestClose={ close }
style={ styles.container }
visible={ visible }
>
<ModalNavbar close={ close }>
Filter
</ModalNavbar>
<View style={ styles.content }>
...
</View>
</Modal>
</SafeAreaView>
);
When FilterModal is openend on iPhoneX it still is in the Statusbar and you cant click on anything.
Any idea how to solve this?
thanks.
Put SafeAreaView inside the Modal component
return (
<Modal
{...defaultModalProps}
onRequestClose={close}
style={styles.container}
visible={visible}
>
<SafeAreaView style={{ flex: 1, backgroundColor: "transparent" }}>
<ModalNavbar close={close}>Filter</ModalNavbar>
<View style={styles.content}>...</View>
</SafeAreaView>
</Modal>
);
if you use react-native-safe-area-context and you have a problem with modal then
<Modal>
<SafeAreaProvider>
<SafeAreaView>
// your modal content
</SafeAreaView>
</SafeAreaProvider>
</Modal>
A Modal fill the entire screen, so you need to provide extra spacing inside the Modal. Margin / Padding will not effect on Modal if applied on parent of Modal.
<Modal {...}>
<TouchableWithoutFeedback onPress={closeModal}>
<SafeAreaView {...}>
{...}
</SafeAreaView>
</TouchableWithoutFeedback>
</Modal>