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.
Related
I was not able to change the activeTintColor and activeBackgroundColor of drawerItem in react-navigation 6, Eventhough I'm using those props on drawer item I can't see any changes in activeItem tintColor change in selected Item.Below here is the code that I'm using where I used the prop activeTintColor to set the active DrawerItem tint color but I don't see any changes in color and even I can't see which is active tab I'm on but navigation works fine.I am able to navigate to DrawerItem screens only thing it active Item which is selected doesn't seems applying activeTintColor etc
function DrawerNavigation() {
return (
<NavigationContainer>
<Drawer.Navigator
screenOptions={{
headerShown: false
}}
drawerContent={(nav) => {
const { navigation } = nav;
let state = navigation.getState();
return (
<View style={{ flex: 1 }}>
<View style={{ alignItems: "center" }}>
<View
style={{
height: 100,
width: 100,
borderColor: "black",
borderWidth: 1,
borderRadius: 50,
marginVertical: 10,
overflow: "hidden"
}}
>
<Image
source={{
uri: "https://m.cricbuzz.com/a/img/v1/192x192/i1/c170661/virat-kohli.jpg"
}}
resizeMode="cover"
style={{ width: "100%", height: "100%" }}
/>
</View>
</View>
<View style={{ flex: 1 }}>
<DrawerItem
label="Home"
pressColor="red"
icon={() => (
<Image
source={require("../assets/home.png")}
style={{ height: 25, width: 25 }}
/>
)}
onPress={() => navigation.navigate("Home")}
activeTintColor="red"
/>
<DrawerItem
label="Profile"
pressColor="red"
icon={() => (
<Image
source={require("../assets/profile.png")}
style={{ height: 25, width: 25 }}
/>
)}
onPress={() => navigation.navigate("Profile")}
activeTintColor="red"
/>
<DrawerItem
label="Cart"
pressColor="red"
icon={() => (
<Image
source={require("../assets/cart.png")}
style={{ height: 25, width: 25 }}
/>
)}
onPress={() => navigation.navigate("Cart")}
activeTintColor="red"
/>
</View>
</View>
);
}}
>
<Drawer.Screen name="HomeStack" component={StackNavigation} />
</Drawer.Navigator>
</NavigationContainer>
);
}
i was facing a similar issue cause i be working with react-navigator 6.x but read the 5.x doc. To set the activeTintColor to all my screens i finnaly do it like that:
<NavigationContainer>
<Drawer.Navigator
screenOptions={{
drawerStyle: {
backgroundColor: "grey",
width: "100%",
},
drawerActiveTintColor: "white",
drawerInactiveTintColor: "yellow",
}}
>
<Drawer.Screen
name="One"
component={OneStackScreen}
options={{
title: "One",
drawerIcon: () => (
<MaterialIcons name="home" size={24} color="white" />
),
}}
/>
<Drawer.Screen
name="Two"
component={TwoStackScreen}
options={{
title: "Ma page",
}}
/>
</Drawer.Navigator>
</NavigationContainer>
in your <Drawer.Navigator/> There is a property named option which takes an
object and in that object you can find the drawerActiveTintColor Property. That
can be used to set the activeTintColor and it will change the background color
as well.
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen}
options={{ drawerActiveTintColor: 'red' }}/>
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
</NavigationContainer>
<DrawerContentScrollView {...props}>
<View style={Styles.DrawerHeader}>
<View style={Styles.ProfileImg}>
{userPic ? (
<Image
source={{
uri: userPic
}}
resizeMode="cover"
style={{ width: "100%", height: "100%" }}
/>
) : (
<Image
source={{
uri: "https://m.cricbuzz.com/a/img/v1/192x192/i1/c170661/virat-kohli.jpg"
}}
resizeMode="cover"
style={{ width: "100%", height: "100%" }}
/>
)}
</View>
<Text style={Styles.ProfileText}>{user}</Text>
</View>
<View style={Styles.Divider}></View>
{state.routes.map((route) => {
return (
<DrawerItem
key={route.key}
icon={({ focused }) => (
<Icon name={listItemIcon} size={20} color={focused ? Colors.Primary : "black"} />
)}
label={({ color }) => <Text style={{ color }}>{route.name}</Text>}
focused={state.routes.findIndex((e) => e.name === route.name) === state.index}
activeTintColor={Colors.Primary}
onPress={() => navigation.navigate(route.name)}
pressColor={Colors.StatusbarColor}
/>
);
})}
</DrawerContentScrollView>
ListHeaderComponent inside flatlist doesn't work. It won't render nothing in header (above flatlist). If I however put some custom component it does work but it doesn't with my renderHeader function. I tried making a custom component with the same view as in renderHeader but when I used that nothing rendered so I don't know
My flatlist along with whole render:
render() {
const { height } = Dimensions.get("window");
return (
<View style={{flex: 1,
backgroundColor: "#EBECF4"}}>
{/* <Text>
Connection Status :{" "}
{this.state.connection_status ? "Connected" : "Disconnected"}
</Text> */}
{/* <Loader loading={this.state.loading} /> */}
<StatusBar backgroundColor="#63003d" barStyle="light-content" />
<SafeAreaView>
<ModernHeader
backgroundColor="#63003d"
height={50}
text="Eleph"
textStyle={{
color: "white",
fontFamily: "Lobster-Regular",
//fontWeight: "bold",
fontSize: 25,
}}
leftIconComponent={
<TouchableOpacity
style={{ marginRight: 0, margin: 0 }}
onPress={() =>
this.props.navigation.dispatch(DrawerActions.openDrawer())
}
>
<FontAwesome5 name="bars" size={22} color="white" />
</TouchableOpacity>
}
rightIconComponent={
<TouchableOpacity
style={{ marginLeft: 0, margin: 0 }}
onPress={() => this.props.navigation.navigate("Profile")}
>
{/* <MaterialCommunityIcons
name="chart-areaspline"
size={24}
color="#639dff"
/> */}
<Foundation name="graph-bar" size={24} color="white" />
{/* <FontAwesome name="bar-chart" size={24} color="white" /> */}
</TouchableOpacity>
}
/>
</SafeAreaView>
<FlatList
//contentInset={{ top: HEADER_HEIGHT }}
//contentOffset={{ y: -HEADER_HEIGHT }}
data={this.state.post}
extraData={this.state.post}
keyExtractor={(item) => item.id.toString()}
style={{
marginHorizontal: 0,
marginVertical: 6,
}}
renderItem={({ item }) => this.renderPost(item)}
ListFooterComponent={this.renderFooter}
ListHeaderComponent={this.renderHeader}
refreshControl={
<RefreshControl
style={{ color: "#639dff" }}
tintColor="#639dff"
titleColor="#fff"
refreshing={this.state.isLoading}
onRefresh={this.onRefresh}
/>
}
initialNumToRender={7}
onEndReachedThreshold={0.1}
showsVerticalScrollIndicator={false}
onEndReached={() => {
if (
!this.onEndReachedCalledDuringMomentum &&
!this.state.isMoreLoading
) {
this.getMore();
}
}}
onMomentumScrollBegin={() => {
this.onEndReachedCalledDuringMomentum = false;
}}
onScroll={(e) => {
scrollY.setValue(e.nativeEvent.contentOffset.y);
}}
></FlatList>
{/* <View style={styles.footer}>
<TouchableOpacity
activeOpacity={0.9}
onPress={this.getMore}
style={styles.loadMoreBtn}
>
<Text style={styles.btnText}>See more moods</Text>
{this.state.loading ? (
<ActivityIndicator color="white" style={{ marginLeft:8 }} />
) : null}
</TouchableOpacity>
</View> */}
</SafeAreaView>
</View>
My renderHeader function:
renderHeader = () => {
return (
<View
style={{
flex: 1,
flexDirection: "row",
backgroundColor: "#ffffff",
//width: "100%",
padding: 11,
alignItems: "center",
position: "absolute",
justifyContent: "center",
//top: 50,
//bottom: 0,
//left: 0,
//elevation: 4,
//right: 0,
//height: 50,
}}
//flexDirection: "row",
//backgroundColor: "#ffffff",
//width: "100%",
//padding: 11,
//alignItems: "center",
>
<TouchableOpacity
onPress={() => this.props.navigation.navigate("Post")}
>
<Text
style={{ alignItems: "center", color: "#C4C6CE" }}
//placeholder={How are you feeling right now ${this.state.user.name}?}
multiline
>{Tell us how are you feeling right now ${this.state.user.name}?}</Text>
</TouchableOpacity>
{/* <View style={styles.divider}></View> */}
</View>
);
}
Why for example renderFooter works??
renderFooter = () => {
if (!this.state.isMoreLoading) return true;
return (
<ActivityIndicator
size="large"
color={"#D83E64"}
style={{ marginBottom: 10 }}
/>
);
};
Use ListHeaderComponentStyle to style the ListHeaderComponent.
I created a simple snack for you, check if this helps. Your code looks okay but not sure about the whole screen design. Here is my snack link.
https://snack.expo.io/#saad-bashar/excited-fudge
It might be related to the other components inside your screen. So first check only with flatlist, remove all other components. Hope you can sort it out :)
The solution is to remove the "absolute" style in the header for flatlist. The question is mine im just answering with different account but this is the solution that worked.
I wanted to add space between button but it's not working below is my code. What do I need to add in my code?
render(){
return (
<View>
<Text>Home</Text>
<Button style={styles.button}
title='Add '
/>
<Button style={styles.button}
title='Search/Update'
/>
</View>
)
}
}
const styles = StyleSheet.create({
button: {
marginBottom: 20,
padding: 30
},
})
Easiest way is to add a spacing view between your two buttons:
<View>
<Text>Home</Text>
<Button style={styles.button} title='Add' />
<View style={styles.space} /> // <------------------------- right here
<Button style={styles.button} title='Search/Update' />
</View>
const styles = StyleSheet.create({
button: {
marginBottom: 20,
padding: 30
},
space: {
width: 20, // or whatever size you need
height: 20,
},
})
Or you could use like this:
<View>
<View style={{ flex: 1, marginBottom: 10 }}>
<Button title="Add" />
</View>
<View style={{ flex: 1 }}>
<Button title="Search/Update" />
</View>
</View>
You can apply this styling to View component in order to get space between two buttons.
Also import Dimensions from react-native and adjust the width of View according to your need.
import { Dimensions } from 'react-native';
<View style={{
width:Dimensions.get("window").width * 0.5,
display:"flex",
justifyContent:"space-evenly",
alignItems: "center"
}}>
<Text>Home</Text>
<Button
style={styles.button}
title='Add '
/>
<Button
style={styles.button}
title='Search/Update'
/>
</View>
The code <View style={{marginVertical: 10}} You have to use here.
The Button should come inside View Tag
You can use the below code to add space between button
<View style={{marginVertical: 10}}>
<Button title="Button 1" />
</View>
<View style={{marginVertical: 10}}>
<Button title="Button 2" />
</View>
I want to be able to align all reply icons to the far right, where the red line is, regardless of where they start.
Edit: added more information to show how recursion is used in the component. Why I try to use some answers that work without recursion, I receive an undesired effect.
This is the code I have in place so far:
class Comment extends Component {
render() {
return(
<View>
<Header
rounded
style={{
backgroundColor: '#ffffff',
position: 'relative',
}}
>
<View style={{flexDirection: 'row', flexWrap: 'wrap', right: '43%', top: '50%'}}>
<Icon name='chevron-left' size={10} color='#006FFF' style={{top: '6%'}}/>
<NativeText
onPress={() => this.props.history.push('/')}
style ={{color: '#006FFF', fontSize: 12, fontFamily: 'Montserrat-Regular'}}
>
Back
</NativeText>
</View>
</Header>
<View
style={{paddingLeft: '2%', paddingTop: '2%'}}
>
<CommentList
options={this.props.location.state.comments}
currentUser={this.props.location.state.currentUser}
history={this.props.history}
reportId={this.props.location.state.reportId}
optionsForBackButton={this.props.location.state.comments}
/>
</View>
</View>
)
}
}
export default withRouter(Comment)
const CommentList = ({options, currentUser, history, reportId, optionsForBackButton}) => {
return (
<View>
{options.map(option => (
<View
style={{flexDirection: 'row'}}
>
<NativeText
style={{fontSize: 12, fontFamily: 'Montserrat-Regular'}}
>
{option.content}
</NativeText>
<View
style={{flex: 1, alignItems: 'flex-end' }}
>
<Icon
name='reply'
size={12}
// onPress={() => {
// setModalVisible(true)
// changeParentId(option._id)
// }}
onPress={() => history.push({pathname: '/create-comment', state: {content: option.content, currentUser: currentUser, reportId: reportId, parentCommentId: option._id, optionsForBackButton: optionsForBackButton}})}
/>
</View>
{
<View
style={{left: '10%'}}
>
<CommentList
options={option.reply}
optionsForBackButton={optionsForBackButton}
history={history}
currentUser={currentUser}
reportId={reportId}
/>
</View>
}
</View>
))}
</View>
)
}
Set your icon containing view's flex value to 1. This should cause it to fill all remaining space.
See the following snack: https://snack.expo.io/#jrdndncn/playful-churros
class Comment extends React.Component {
render() {
return (
<View
style={{
marginVertical: 2,
flexDirection: 'row',
marginLeft: (this.props.indent || 0) * 20,
}}>
<Text>{this.props.text}</Text>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<View style={{ width: 20, height: 20, backgroundColor: 'red' }} />
</View>
</View>
);
}
}
<Comment text="hello" indent={0} />
<Comment text="hello" indent={1} />
<Comment text="hello" indent={2} />
Basically marginLeft:'auto' will do the trick. just add style to icon as :
<Icon
name='reply'
size={12}
style={{marginLeft:'auto'}}
// onPress={() => {
// setModalVisible(true)
// changeParentId(option._id)
// }}
onPress={() => history.push({pathname: '/create-comment', state: {content: option.content, currentUser: currentUser, reportId: reportId, parentCommentId: option._id, optionsForBackButton: optionsForBackButton}})}
/>
i added marginLeft:'auto' in style it will automatically shown at the right end of the screen.
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 />