I am not able to use the native base deck swiper every time I try to run the program using the code given in the official website of native base I get a blank white screen.My code is:-
<DeckSwiper
dataSource={cards}
renderItem={item =>
<Card style={{ elevation: 3 }}>
<CardItem>
<Left>
<Thumbnail source={item.image} />
<Body>
<Text>{item.text}</Text>
<Text note>NativeBase</Text>
</Body>
</Left>
</CardItem>
<CardItem cardBody>
<Image style={{ height: 300, flex: 1 }} source={item.image} />
</CardItem>
<CardItem>
<Icon name="heart" style={{ color: '#ED4A6A' }} />
<Text>{item.name}</Text>
</CardItem>
</Card>
}
/>
no error is displayed but the only thing I got is a white blank screen
Put your Deckswiper inside the view and give height to that view. it should work
<View style={{height:400}}>
<DeckSwiper
dataSource={cards}
renderItem={item =>
<Card style={{ elevation: 3 }}>
<CardItem>
<Left>
<Thumbnail source={item.image} />
<Body>
<Text>{item.text}</Text>
<Text note>NativeBase</Text>
</Body>
</Left>
</CardItem>
<CardItem cardBody>
<Image style={{ height: 300, flex: 1 }} source={item.image} />
</CardItem>
<CardItem>
<Icon name="heart" style={{ color: '#ED4A6A' }} />
<Text>{item.name}</Text>
</CardItem>
</Card>
}
/>
</View>
Whoever searching an answer about this issue remember that the example in native-base docs using internal resources for images. So if you're using external resources for your Image components (like an image url) please use
<Image style={{ height: 300, flex: 1 }} source={{uri:item.image}} />
instead. It's basic as hell but can be overlooked easily.
Related
I know these kind of questions have in the stackoverflow before. But I cannot the find the correct solution for this problem.
Have any solution for put <FlatList/> inside of the <ScrollView></ScrollView> in react-native?
here is my code...
<ScrollView
onScroll={(e) => {
onScroll(e);
}}
stickyHeaderIndices={[1]}
contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}
style={{ width: '100%' }}
>
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
{isLoading ? (
<DotIndicator color="#4cd137" style={{ marginBottom: 200 }} />
) : (
<FlatList
data={data}
keyExtractor={(item, index) => String(index)}
renderItem={({ item }) => (
<View
style={{
flex: 0,
padding: 5,
}}>
<Card style={styles.card}>
<CardItem header style={styles.cardText}>
<Title style={styles.textSign}>{item.question}</Title>
</CardItem>
<CardItem style={styles.cardText1}>
<Body>
<Paragraph>{item.answer}</Paragraph>
</Body>
</CardItem>
</Card>
</View>
)}
/>
)}
</View>
</ScrollView>
Error gives as follow:
ERROR VirtualizedLists should never be nested inside plain
ScrollViews with the same orientation because it can break windowing
and other functionality - use another VirtualizedList-backed container
instead.
I found the solution for that. I put my <ScrollView></ScrollView> component codes inside of <FlatList> ListHeaderComponent props.
Here is how it looks. I'm pretty sure this should works for every-one
I found that solution from here. you can refer it and can understandable it very easily.
How to Fix 'VirtualizedLists should never be nested inside plain ScrollViews' Warning
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
{isLoading ? (
<DotIndicator color="#4cd137" style={{ marginBottom: 200 }} />
) : (
<FlatList
data={data}
ListHeaderComponent={ //here I write ListHeaderComponent and put all code lines of `<ScrollView></ScrollView>` in here
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
<Image
source={require('../assets/Interview.png')}
width="100%"
height="0"
style={styles.logo2}
/>
</View>
}
keyExtractor={(item, index) => String(index)}
renderItem={({ item }) => (
<View
style={{
flex: 0,
padding: 5,
}}>
<Card style={styles.card}>
<CardItem header style={styles.cardText}>
<Title style={styles.textSign}>{item.question}</Title>
</CardItem>
<CardItem style={styles.cardText1}>
<Body>
<Paragraph>{item.answer}</Paragraph>
</Body>
</CardItem>
</Card>
</View>
)}
/>
)}
</View>
You can do this by,
<ScrollView>
<ScrollView horizontal={true}> // add this
<FlatList />
<ScrollView/>
<ScrollView>
this happens because inside the FlatList there is a ScrollView too, what you can do is wrap your FlatList in a View to separate the Scroll's
InnerWrapper is only another View
you can wrapper you FlatList like this:
<ScrollView
onScroll={(e) => {
onScroll(e);
}}
stickyHeaderIndices={[1]}
contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}
style={{ width: '100%' }}
>
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
{isLoading ? (
<DotIndicator color="#4cd137" style={{ marginBottom: 200 }} />
) : (
<InnerWrapper>
<FlatList
data={data}
keyExtractor={(item, index) => String(index)}
renderItem={({ item }) => (
<View
style={{
flex: 0,
padding: 5,
}}>
<Card style={styles.card}>
<CardItem header style={styles.cardText}>
<Title style={styles.textSign}>{item.question}</Title>
</CardItem>
<CardItem style={styles.cardText1}>
<Body>
<Paragraph>{item.answer}</Paragraph>
</Body>
</CardItem>
</Card>
</View>
)}
/>
</InnewWrapper>
)}
</View>
</ScrollView>
As you don't have any other element don't use ScrollView. Use this code as flatlist will itself scroll at its elements.
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
{isLoading ? (
<DotIndicator color="#4cd137" style={{ marginBottom: 200 }} />
) : (
<FlatList
style={{flex:1}}
data={data}
keyExtractor={(item, index) => String(index)}
renderItem={({ item }) => (
<View
style={{
flex: 0,
padding: 5,
}}>
<Card style={styles.card}>
<CardItem header style={styles.cardText}>
<Title style={styles.textSign}>{item.question}</Title>
</CardItem>
<CardItem style={styles.cardText1}>
<Body>
<Paragraph>{item.answer}</Paragraph>
</Body>
</CardItem>
</Card>
</View>
)}
/>
)}
</View>
just add this property in Flatlist
scrollEnabled={false}
In ios it is ok however when i click input in android, button appears over keyboard and it seems so bad. how can i handle that ? this is my code:
<>
<SafeAreaView style={styles.container}>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
keyboardShouldPersistTaps="handled"
style={styles.scrollviewStyle}
>
<FormInput label="1" />
<FormInput label="2" />
<FormInput label="3" />
<FormInput label="4" />
<FormInput label="5" icon={true} />
<Text
style={{
color: '#938E8E',
marginLeft: 30,
fontSize: 14,
fontWeight: '400',
}}
>
text
</Text>
<Dropdown />
<View style={styles.agreementContainer}>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}
>
<CheckBox onPress={chekboxButton} checked={toggleCheckBox} />
<TouchableOpacity>
<Text style={styles.acceptagreementStyle}>
text
</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
<View style={styles.buttonContainer}>
<Button buttonText="1" onSubmit={() => console.log('test')} />
</View>
</SafeAreaView>
</>
this button comes over keyboard:
<View style={styles.buttonContainer}>
<Button buttonText="1" onSubmit={() => console.log('test')} />
</View>
If I understood your question correctly, you can easily fix this problem using
<KeyboardAvoidingView> https://reactnative.dev/docs/keyboardavoidingview
and wrapping your component with that.
this is because android:windowSoftInputMode property in AndroidManifest.xml which is set to adjustResize by default
you have 2 solutions
1 : change your android/app/src/main/AndroidManifest.xml
<activity
....
android:windowSoftInputMode="adjustPan">
2 : use react-native-android-keyboard-adjust
import AndroidKeyboardAdjust from 'react-native-android-keyboard-adjust';
.....
AndroidKeyboardAdjust.setAdjustPan();
Basically, I have a working flatlist data obtained from an remote api & presented as cards. I have added share button in the UI, but not able to figure out,
how I can add on press on each card which when clicked opens more details about that specific card or onclick of share button I can share card specific data or copy card specific data
<View>
<FlatList
data={this.state.dataSource}
renderItem={({ item }) => <CardBox message={item} />}
keyExtractor={(item) => item.Id.toString()}
onEndReached={() => dispatchFetchPage()}
initialNumToRender={1}
maxToRenderPerBatch={2}
onEndReachedThreshold={0.5}
/>
</View>
<Card>
<CardItem button >
<View style={carddesign.card}>
<View>
<Text>Quote by : {this.props.message.author}</Text>
</View>
<View>
<Text style={carddesign.cardText}>{this.props.message.quote}</Text>
<Text style={carddesign.cardSubText}>{this.props.message.genre}</Text>
</View>
</View>
</CardItem>
<CardItem>
<Left style={{ flex: 1 }}>
<Button transparent onPress={ShareQuote}>
<Icon active name="share" />
<Text style={{ fontSize: 12 }}>Share</Text>
</Button>
</Left>
<Body style={{ flex: 1 }}>
<Button transparent>
<Icon active name="chatbubbles" />
<Text style={{ fontSize: 12 }}>Copy</Text>
</Button>
</Body>
<Right style={{ flex: 1 }}>
<Button transparent>
<Icon active name="download" />
<Text style={{ fontSize: 12 }}>Download</Text>
</Button>
</Right>
</CardItem>
</Card>
You could wrapp card component inside a TouchableOpacity as follows:
<TouchableOpacity onPress={this._onPressButton}>
<Card></Card>
</TouchableOpacity>
Hope it helps.
I'm using Native-base components to create a card.
But, i find a problem in displaying icons with text. I want to display it like this :
But i get this result :
This is my code :
<Card style= {{ flex: 1 , width : width-30 , marginTop :10}}>
<CardItem cardBody>
<Image source= { require('./images/post-media/1.png') } style={{height: 200, width: null, flex: 1}}>
</Image>
</CardItem>
<CardItem style = {{backgroundColor: 'white'}}>
<Body>
<Text style= {styles.txt}>
this is my text blabla blabla blabla
</Text>
<View style={{ borderBottomWidth: 1, borderBottomColor: '#839fcc', width: width-70 }} />
</Body>
</CardItem>
<CardItem >
<Left>
<Button transparent>
<Icon name="time" style={styles.icon} />
<Text>2017.07.05 </Text>
</Button>
</Left>
<Body>
<Button transparent >
<Icon name="heart" style={styles.icon} />
<Text >325</Text>
</Button>
</Body>
<Right>
<Icon name="chatbubbles" style={styles.activeIcon} />
<Text>325</Text>
</Right>
</CardItem>
</Card>
For the style :
icon: {
color: '#839fcc'
},
activeIcon:{
color:'#0d5be9'
}
Any idea please ?
Your question is not clear,but from the screen shot i see that breakage is the problem.
Import these things from the below library(this answer works only if you use this library)
import { Col, Row, Grid } from 'react-native-easy-grid';
In you code use the Row tag and give proper flux to place the icon and text in proper manner.
<CardItem >
<Left>
<Row>
<Button transparent>
<View style={{flex: 1}}>
<View style={{flex: 2}}>
<Icon name="time" style={styles.icon} />
</View>
<View style={{flex: 2}}>
<Text>2017.07.05 </Text>
</View>
</View>
</Button>
</Row>
</Left>
</CardItem>
Above i have only edited the left tag , use flux or else it will break in different screen sizes.By properly altering the flux values you can arrange their position in suitable manner.
I'm using native-base to create a React Native app:
I'm using the Header Component to display Body, Left and Right elements. According to the docs, the title should automatically center but it does not (as seen below).
Am I missing something simple here? Any help would be appreciated!
import {
Container,
Header,
Content,
Left,
Right,
Body,
Title,
Icon
} from "native-base"
export default class Seminars extends React.Component{
render(){
return(
<Container style={styles.container}>
<Header style={styles.header}>
<Left>
<Icon name='arrow-back' />
</Left>
<Body>
<Title>Seminars</Title>
</Body>
<Right>
<Icon name='menu' />
</Right>
</Header>
<Content contentContainerStyle={styles.content} >
<Text>Content Here</Text>
</Content>
</Container>
)
}
}
const styles = StyleSheet.create({
container: {
},
header: {
paddingRight: 15,
paddingLeft: 15
},
content: {
display: "flex",
flex: 1,
justifyContent: "center",
padding: 15
}
});
If you want the title to be in the center, you can add flex:1 in Left, Body and Right like this :
return(
<Container style={styles.container}>
<Header style={styles.header}>
<Left style={{flex:1}}>
<Icon name='arrow-back' />
</Left>
<Body style={{flex:1}}>
<Title>Seminars</Title>
</Body>
<Right style={{flex:1}}>
<Icon name='menu' />
</Right>
</Header>
<Content contentContainerStyle={styles.content} >
<Text>Content Here</Text>
</Content>
</Container>
)
And this is the result :
I hope this answer can help you :)
This answer can help you, worked for me.
<Header style={{backgroundColor:'#ff2929'}}>
<Left style={{flex: 1}}>
<Button transparent style={{width: 65}}>
<Icon style={{color:"#fff"}} type="MaterialIcons" name={this.props.imageLeft}/>
</Button>
</Left>
<Body style={{flex: 3,justifyContent: 'center'}}>
<Title style={{color: '#fff',alignSelf:'center'}}>{this.props.headerTitle}</Title>
</Body>
<Right style={{flex: 1}}>
<Button transparent style={{width: 65}}>
<Icon style={{color:this.props.color}} type="MaterialIcons" name={this.props.imageRight}/>
</Button>
</Right>
</Header>
You can also try this one:
<Header>
<Left style={{ flex: 1 }}>
<Icon name="arrow-back" />
</Left>
<Body style={{ flex: 1 }}>
<Title style={{ alignSelf: "center" }}>Seminars</Title>
</Body>
<Right style={{ flex: 1 }}>
<Icon name="menu" />
</Right>
</Header>
I find the best way to do this and its Work for me.
<Header transparent>
<Left style={{ flex: 1 }}>
<Icon name='arrow-back' />
</Left>
<Body style={{ flex: 1 }}>
<Title style={{ justifyContent: 'center', color: '#9fabdd' }}>Home</Title>
</Body>
<Right style={{ flex: 1 }}>
<Icon name='arrow-back' />
</Right>
</Header>
<Header>
<Left style={{flex: 1}} />
<Body style={{flex: 1}}>
<Title style={{alignSelf: 'center'}}>Header</Title>
</Body>
<Right style={{flex: 1}} />
</Header>
static navigationOptions = ({ navigation }) => {
return {
headerTitle: (
<Image style={{width: 50, height: 10}} alignItems='center' source={require('../assets/zazzy.png')} />
</View>
),
headerLeft: (
<View style={{ padding: 10 }}>
<Ionicons name="ios-apps" color='gold' size={24} onPress={() => navigation.navigate('DrawerOpen')} />
</View>
),
headerRight: (
<View style={{ padding: 10 }}>
<Ionicons name="md-search" color='silver' size={24} onPress={() => navigation.navigate('DrawerOpen')} />
</View>
)
}
}
render() {
return (
<HomeScreenTabNavigator screenProps={{ navigation: this.props.navigation }} />
)
}
}
<Container style={styles.container}>
<Header style={styles.header}>
<Left style={{flex:1}}>
<Icon name='arrow-back' />
</Left>
<Body style={{flex:1}>
<Title style={{width:'100%'}}>Seminars</Title>
</Body>
<Right style={{flex:1}}>
<Icon name='menu' />
</Right>
</Header>
<Content contentContainerStyle={styles.content} >
<Text>Content Here</Text>
</Content>
</Container>
I found this as a solution when the left and right items are of unequal sizes, works for both android and iOS