RN: I am using tab component of native base. I tab bar component I want to stop scrolling horizontally because I am planning to have some horizontally scroll able view in first tab of this tab bar component. I just want tabs not to change when user drag right or left until he touches the icon itself.I am unable to find such a prop for it with the help of which I can stop that. Hope you understand. Here it is, I want to stop this.
Here is the code.
render() {
return (
<Container>
<Tabs renderTabBar={() => <ScrollableTab style={{ backgroundColor: '#4169E1' }} />} >
<Tab
heading={<TabHeading style={{ backgroundColor: '#4169E1' }}>
<Icon name="home" style={{ color: 'white' }} />
</TabHeading>}>
<Text> This is Home </Text>
</Tab>
<Tab
heading={<TabHeading style={{ backgroundColor: '#4169E1' }} >
<Icon name="ios-search" style={{ color: 'white' }} />
</TabHeading>}>
<Text> This is Search </Text>
</Tab>
<Tab
heading={<TabHeading style={{ backgroundColor: '#4169E1' }} >
<SimpleLineIcons name='user' color='white' size={25} style={{ marginLeft: 20 }} />
</TabHeading>}>
<Text> THis is User </Text>
</Tab>
<Tab
heading={<TabHeading style={{ backgroundColor: '#4169E1' }} >
<Icon name="help" style={{ color: 'white' }} />
</TabHeading>}>
<Texy> </Text>
</Tab>
<Tab
heading={<TabHeading style={{ backgroundColor: '#4169E1' }} >
<Icon name="cog" style={{ color: 'white' }} />
</TabHeading>}>
<Settings />
</Tab>
</Tabs>
</Container>
try this:
<Tabs locked />
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 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>
I added a tabbar with ScrollableTabView. I want to navigate the tabbar I added. For example, I want the 'mainEkran' class to open in 1.tab. 2. I want to show the notification class when I click on the tab. How can I navigate with Tab?
import anaEkran from "../screens/anaEkran";
import notification from "../screens/notification";
export default class HomeScreen extends Component {
return (
<View style={styles.container}>
<ScrollableTabView renderTabBar={() => <MaskTabBar someProp={'here'} showMask={true} maskMode='light' />}>
<anaEkran navigation={this.props.navigation} tabLabel=".."/>
<notification navigation={this.props.navigation} tabLabel=".."/>
</ScrollableTabView>
<View style={{ marginRight: 10 ,marginTop:30}}>
<Image source={require('../images/HEADER.png')} style={{ width: screenWidth, height: 80 }}>
.... }
renderTabView = () => (
<Tabs
ref={(tabView) => this.tabView = tabView}
style={{ backgroundColor: 'transparent' }}
tabContainerStyle={{ elevation: 0, backgroundColor: 'transparent' }}
tabStyle={{ backgroundColor: 'transparent' }}
page={this.props.navigation.getParam('page')}
onChangeTab={this.onChangeTab.bind(this)}
>
<Tab
heading="Tab 1"
tabStyle={{ backgroundColor: 'transparent' }}
activeTabStyle={{ backgroundColor: 'transparent' }}
textStyle={styles.textStyle}
activeTextStyle={styles.textStyle}
active={this.props.navigation.state.index === 0}
>
<Tab1
{...this.props}
/>
</Tab>
<Tab
heading="Tab2"
tabStyle={{ backgroundColor: 'transparent' }}
activeTabStyle={{ backgroundColor: 'transparent' }}
textStyle={styles.textStyle}
activeTextStyle={styles.textStyle}
active={this.props.navigation.state.index === 1}
>
<Tab2
{...this.props}
/>
</Tab>
<Tab
heading="Tab 3"
tabStyle={{ backgroundColor: 'transparent' }}
activeTabStyle={{ backgroundColor: 'transparent' }}
textStyle={styles.textStyle}
activeTextStyle={styles.textStyle}
active={this.props.navigation.state.index === 2}
>
<Tab3
{...this.props}
/>
</Tab>
</Tabs>
);
render() {
return (
<Container>
<Header hasTabs style={styles.header}>
<Left style={styles.flex1}>
<TouchableOpacity
onPress={onLeftPress}
style={{ marginLeft: 16 }}
>
<Text style={styles.notificationTxt}>
{`Left`}
</Text>
</TouchableOpacity>
</Left>
<Body style={styles.headerBody}>
<GNImage
square
source={require('../../assets/images/LogoGroup_Header.png')}
style={styles.logo}
/>
</Body>
<Right style={styles.flex1}>
<TouchableOpacity
style={[styles.notification, { backgroundColor: '#F2F2F2' }]}
onPress={onPress}
>
<Text style={styles.notificationTxt}>
{`Done`}
</Text>
</TouchableOpacity>
</View>
</Right>
</Header>
{
this.renderTabView()
}
</Container>
);
}
Then you can call like this to change tab programatically.
openTab = (index) => {
NavigationService.navigate('Home', {
page: index
})
}
Home is the name of the class in which we have defined above TabView code.
I want to display multiple FAB based on numColumns
Unable to render the FAB object inside the Flatlist
<View style={styles.search_field_container}>
<FlatList
data={formatData(this.state.users, numColumns)}
numColumns={numColumns}
keyExtractor={item => item.id}
renderItem={({item}) => this.renderitem(item)}
/>
renderitem = item => {
return (
<Container>
<Header />
<View style={{ flex: 1 }}>
<Fab
active={this.state.active}
direction="up"
containerStyle={{ }}
style={{ backgroundColor: '#5067FF' }}
position="bottomRight"
onPress={() => this.setState({ active: !this.state.active })}>
<Icon name="share" />
<Button style={{ backgroundColor: '#34A34F' }}>
<Icon name="logo-whatsapp" />
</Button>
<Button style={{ backgroundColor: '#3B5998' }}>
<Icon name="logo-facebook" />
</Button>
<Button disabled style={{ backgroundColor: '#DD5144' }}>
<Icon name="mail" />
</Button>
</Fab>
</View>
</Container>
);
};
}
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.