I am tryin g to make the buttons login and register have top spacing from the logo above them but no css attributes work so far
I tried padding top/margin top and top but all don't work and margin left doesn't work also
here's the expo snack link:
https://snack.expo.io/#mai95/intelligent-tortillas
<Button title="Login" style={{top:300}} onPress={() => navigation.navigate("Details")} >
<Text style={styles.loginText}>LOG IN</Text>
</Button>
<Button title="Register"style={{top:300,marginLeft:50}} onPress={() => navigation.navigate("Details")} >
<Text style={styles.loginText2}>Register</Text>
</Button>
any idea what's wrong?
The styles prop is not available on the <Button /> component. You should consider wrapping the buttons in a div like so:
<View style={{ flexDirection: 'row', marginTop: 100 }}>
<View style={{ marginHorizontal: 25 }}>
<Button title="Login" onPress={() => navigation.navigate('Details')}>
<Text style={styles.loginText}>LOG IN</Text>
</Button>
</View>
<View style={{ marginHorizontal: 25 }}>
<Button
title="Register"
onPress={() => navigation.navigate('Details')}>
<Text style={styles.loginText2}>Register</Text>
</Button>
</View>
</View>
MarginTop should be in a container <View/>
Here is the snippet working with marginTop:
<View style={{flexDirection:'row', marginTop: 30}}>
<Button title="Login" onPress={() => navigation.navigate("Details")} >
<Text style={styles.loginText}>LOG IN</Text>
</Button>
<Button title="Register" onPress={() => navigation.navigate("Details")} >
<Text style={styles.loginText2}>Register</Text>
</Button>
</View>
Related
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();
I want to place a text and a toggle button in such a manner that the Text should be there at flex-start and the toggle would be there at the flex end. I have come up with the following code :
<TouchableRipple onPress={() => { }}>
<View style={{flexDirection: 'row'}}>
<Text style={{ fontSize: 18, fontWeight: "bold" }}>
<FontAwesome5 name="bookmark" size={16} /> Booked
</Text>
<View pointerEvents="none" style={{justifyContent: "flex-end"}}>
<Switch value={true} />
</View>
</View>
</TouchableRipple>
But the view is coming as follows:
How can I put the same at the end ?
Any help would be appritiated.
Here try this
<TouchableRipple onPress={() => { }}>
<View style={{flexDirection: 'row'}}>
<View style={{flex:1}}> //wrap Text inside view with flex 1
<Text style={{ fontSize: 18, fontWeight: "bold" }}>
<FontAwesome5 name="bookmark" size={16} /> Booked
</Text>
</View>
<View pointerEvents="none" style={{flex:1,justifyContent: "flex-end"}}> //add flex 1 here
<Switch value={true} />
</View>
</View>
</TouchableRipple>
I am trying to wrap the data present in a list and make the list swipeable using SwipeRow. But after I add the SwipeRow on top of my ListItem tag, the content is not displayed.
I have tried using renderItem but that seems unrelatable and doesn't work.
return(
// <SwipeRow style={{backgroundColor:'red'}}>
//body={
<View style={{backgroundColor: 'red'}}>
<ListItem style={{ width: '100%' }} onPress={() => this.navigationTo(this.props.data.h)}>
<View style={{ marginHorizontal: 15, alignSelf: 'flex-start' }}>
{this.props.data.iconType === 'Material' ? (
<MaterialIcon style={{}} size={24} name={this.props.data.i} color="#87898B" />
) : (
<MaterialCommunityIcons style={{}} size={24} name={this.props.data.i} color="#87898B" />
)}
</View>
<View>
<Text style={styles.heading}>{this.props.data.h}</Text>
<Text style={styles.description}>
{this.props.data.dp}{' '}
<B>
{count} {this.props.data.db}
</B>{' '}
{this.props.data.da}.
</Text>
<Text style={styles.metadata}>{this.props.data.m}</Text>
</View>
</ListItem>
</View>
// }
// </SwipeRow>
);
Probably try giving some styles to SwipeRow assuming you have imported the swipeRow
You can use renderRow in ListView
<ListView
style={{flex: 1, backgroundColor:'red'}}
dataSource={this.props.data}
renderRow={ data => (
<SwipeRow
leftOpenValue={75}
rightOpenValue={-75}
>
<View style={{ marginHorizontal: 15, alignSelf: 'flex-start' }}>
{this.props.data.iconType === 'Material' ? (
<MaterialIcon style={{}} size={24} name={data.i} color="#87898B" />
) : (
<MaterialCommunityIcons style={{}} size={24} name={data.i} color="#87898B" />
)}
</View>
<View>
<Text style={styles.heading}>{data.h}</Text>
<Text style={styles.description}>
{data.dp}{' '}
<B>
{count} {data.db}
</B>{' '}
{data.da}.
</Text>
<Text style={styles.metadata}>{data.m}</Text>
</View>
</SwipeRow>
)}
/>
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 like the same style as IOS in android. You can see the in IOS the Icon in the middle is nice, but in android it isn't
The code I use is this one
<Footer style={{ backgroundColor: "#FFFFFF" }}>
<FooterTab style={{ backgroundColor: "#FFFFFF" }}>
<Button onPress={() => { Actions.Startpage();}}>
<Icon name="search" size={30} color="#3ba936" />
<Text style={styles.smalltext} numberOfLines={1}>Ontdekken</Text>
</Button>
<Button onPress={() => { Actions.ThemasPage();}}>
<Icon name="id-card" size={30} color="#3ba936" />
<Text style={styles.smalltext} numberOfLines={1}>Thema's</Text>
</Button>
<Button style={{marginBottom:20, borderRadius:50, height: 90, backgroundColor: '#FFFFFF', overflow: 'visible'}} onPress={() => { Actions.EventPage();}}>
<Icon name="calendar-plus-o" size={50} color="#3ba936" />
<Text style={styles.smalltext} numberOfLines={1}>Evenementen</Text>
</Button>
<Button onPress={() => { Actions.Wildpage();}}>
<Icon name="binoculars" size={30} color="#e50040" />
<Text style={styles.smalltext} numberOfLines={1}>100% Wild</Text>
</Button>
<Button onPress={() => { Actions.MenuPage();}}>
<Icon name="bars" size={30} color="#3ba936" />
<Text style={styles.smalltext} numberOfLines={1}>Menu</Text>
</Button>
</FooterTab>
</Footer>
This is because the button is bigger than the container.
In iOS it will be visible but on android the container will crop any inner element that overflow.
What you can do is to change the height on Footer to be equal to that middle button, and make sure that the other buttons are smaller in height to give you the same effect without any overflow outside parent Component.
And for the gray line you can add a view with height of 1 and full width