this is my code:
Welcome.navigationOptions = {
headerTitle: <Text style={theme.fonts.header}>Welcome</Text>,
headerTitleStyle: {
alignSelf: "center",
textAlignVertical: "center"
},
headerRight: (
<TouchableOpacity style={{ alignSelf: "center" }}>
<Block flex={false}>
<Image
resizeMode="contain"
source={require("../../assets/images/Icon/Menu.png")}
style={{ width: 20, height: 24 }}
/>
<Badge
size={13}
color={theme.colors.accent}
style={{ position: "absolute", top: -4, right: -4 }}
/>
</Block>
</TouchableOpacity>
)
};
You see i have used textVerticalAlign & alignSelf to center for headerTitleStyle and used alignSelf
center for headerRight, still no effect and this is the result of the code which you it's like aligned on bottom:
I also tried this still not working:
headerStyle: {
alignItems: 'center'
}
give [flex : 1] to header title style
Here is the code for Navigation Options:
static navigationOptions = ({ navigation }) => {
const params = navigation.state.params || {};
return {
title: "Title",
headerTintColor: 'white',
headerTitleStyle: {
textAlign: 'center',
flex:1,
alignSelf: 'center',
},
headerStyle: {
backgroundColor: '#ff6500'
},
headerLeft:(<View></View>),
headerRight: (<View style={{ flexDirection: 'row', justifyContent: 'flex-end',marginRight:15 }}>
<Text style={{justifyContent:"center"}}>btn</Text>
</View>)
}
};
Code ScreenShot:
You would do this in headerTitleContainerStyle instead of headerTitleStyle.
Vertically center:
headerTitleContainerStyle: { alignSelf: 'center' }
Related
related to : https://github.com/Flair-Dev/react-native-awesome-gallery
I tried many things, but nothing is working.
I made the gesture and reanimation installation as wanted.
what I have :
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Gallery from 'react-native-awesome-gallery';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
const ModalInfos = (props) => {
const [showMenu, setShowMenu] = useState(false)
return (
<View style={style.centeredView}>
<View style={style.modalView}>
<Text>{props.infos.name}</Text>
<Text> lots of infos here</Text>
....
....
....
<Text style={{ fontWeight: 'bold' }}> check menu </Text>
<TouchableOpacity
onPress={() => setShowMenu(true)}
>
<MaterialCommunityIcons name="book-open-variant" size={20} color={'#fff'} />
</TouchableOpacity>
</View>
{
showMenu &&
<View style={style.gallery}>
<GestureHandlerRootView style={{ flex: 1 }}>
<Gallery
data={["http://10.0.2.2:8080/images/menu/" + props.infos.barInfos.photomenu1, "http://10.0.2.2:8080/images/menu/" + props.infos.barInfos.photomenu2]}
onIndexChange={(newIndex) => {
console.log(newIndex);
}}
/>
</GestureHandlerRootView>
</View>
}
</View>
)
}
const style = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22,
},
modalView: {
width: '95%',
margin: 20,
backgroundColor: "white",
borderRadius: 20,
padding: 35,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
gallery: {
flex: 1,
width: "100%",
height: "100%",
position: 'absolute',
zIndex: 10,
backgroundColor: '#202124e6',
}
});
export default ModalInfos;
With or without the GestureHandlerRootViewits the same result, i can see only the first image, and I can't do anything, no swipe, no zoom, not gesture.
I switched to react-native-image-viewing
works more than perfectly
I need to show different tags depending on which user is logged.
Franchisee will see: 'Central' 'Empleados' 'Clientes'.
Employee: 'Store' 'Clientes'
User: none. just the generic info.
Here is my code:
(this is the array that states the scrollview)
const Chats = (props) => {
const TAGS = [
"store",
"Clientes",
"Central",
"Empleados",
]
and this is the component:
import React, { useState } from "react";
import { StyleSheet, FlatList, TouchableOpacity, ScrollView, Image } from 'react-native';
import { SimpleHeader, View, Text } from '../../elements/index';
const Chatstores = ({ chatsstore, navigation }) => (
<View>
<TouchableOpacity onPress={() => navigation.navigate("ChatPersonal")}>
<View style={styles.list} >
<Image source={chatsstore.img} style={styles.iconimg} />
<View style={styles.dataText}>
<View style={styles.nametime}>
<Text style={styles.text}>{chatsstore.name} </Text>
<Text >{chatsstore.time}</Text>
</View>
<Text style={styles.msg}>{chatsstore.msg} </Text>
</View>
</View>
</TouchableOpacity>
</View>
);
const ChatClients = ({ chatsClients, navigation }) => (
<View>
<TouchableOpacity onPress={() => navigation.navigate("ChatPersonal")}>
<View style={styles.list}>
<Image source={chatsClients.img} style={styles.iconimg} />
<View style={styles.dataText}>
<View style={styles.nametime}>
<Text style={styles.text}>{chatsClients.name} </Text>
<Text >{chatsClients.time}</Text>
</View>
<Text style={styles.msg}>{chatsClients.msg} </Text>
</View>
</View>
</TouchableOpacity>
</View>
);
const Chats = (props) => {
const { TAGS, chatsstore, chatsClients, navigation } = props;
const [selectedTag, setSelectedTag] = useState(null)
const [routeDistance, setRouteDistance] = useState(0);
return (
<View style={styles.wrapper}>
<SimpleHeader
style={styles.head}
titleLeft="Chats"
onSearchPress
onAddPress
/>
{/**shows horizontal, scrollview of Tags. */}
<View style={styles.scrollview}>
<ScrollView horizontal showsHorizontalScrollIndicator={false} >
<View style={styles.viewcontainer}>
{TAGS.map((tag) => (
<TouchableOpacity
onPress={() =>
setSelectedTag(tag === selectedTag ? null : tag)
}>
<View
style={[
styles.tag,
selectedTag === tag ? styles.selectedTag : {}
]}>
<Text style={styles.textTag}>{tag}</Text>
</View>
</TouchableOpacity>
))}
</View>
</ScrollView>
</View>
{/**If tag is store, shows its data, otherwise the rest */}
{selectedTag === "store" ? (
<View style={styles.chat}>
<FlatList
data={chatsstore}
renderItem={({ item, index }) => (
<Chatstores
chatsstore={item}
index={index}
navigation={navigation}
/>
)}
keyExtractor={(chatsstore) => chatsstore.name}
ListEmptyComponent={() => (
<Text center bold>No hay ningún mensaje de clientes</Text>
)}
/>
</View>
) :
<View style={styles.chat}>
<FlatList
data={chatsClients}
renderItem={({ item, index }) => (
<ChatClients
chatsClients={item}
index={index}
navigation={navigation}
/>
)}
keyExtractor={(chatsClients) => chatsClients.name}
ListEmptyComponent={() => (
<Text center bold>No hay ningún mensaje de clientes</Text>
)}
/>
</View>
}
</View>
);
};
const styles = StyleSheet.create({
wrapper: {
backgroundColor: "#ffffff",
display: "flex",
flex: 1,
},
head: {
height: 80,
display: "flex",
alignItems: "center",
zIndex: 1,
top: 5,
},
scrollview: {
display: "flex",
alignItems: "center",
justifyContent: "space-evenly",
},
viewcontainer: {
display: "flex",
flexDirection: "row",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 1,
right: 10,
},
list: {
bottom: 15,
flexWrap: "wrap",
alignContent: "space-between",
position: "relative",
marginVertical: 2,
backgroundColor: "#fff",
shadowColor: "#000",
elevation: 2,
flexDirection: "row",
}, dataText: {
alignSelf: "center",
flexDirection: "column",
width: "80%",
},
nametime: {
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
},
iconimg: {
display: "flex",
height: 43,
width: 43,
alignSelf: "center",
flexDirection: "column",
},
chat: {
margin: 10,
},
text: {
margin: 10,
fontFamily: "Montserrat_700Bold",
paddingHorizontal: 10,
},
msg: {
margin: 10,
fontFamily: "Montserrat_400Regular",
fontSize: 15,
paddingHorizontal: 10,
bottom: 10
},
map: {
display: "flex",
height: "100%",
},
tag: {
display: "flex",
alignSelf: "center",
marginBottom: 1,
width: 225,
padding: 10,
},
selectedTag: {
borderBottomColor: '#F5BF0D',
borderBottomWidth: 2,
},
textTag: {
fontFamily: "Montserrat_700Bold",
alignItems: "center",
textAlign: "center",
fontSize: 15,
},
buttonContainer: {
marginHorizontal: 20
},
button: {
backgroundColor: "#000000",
top: Platform.OS === 'ios' ? 12 : 20,
height: 60,
marginBottom: 40,
marginRight: 10,
},
});
export default Chats;
So I guess that in my "show horizontal tags" I should write some kind of if, that gets the role from the user token?
Or would it be better to write different routes into the navigation and handle it in 3 different components?
I have a component with a ScrollView that works, and I want to add a scenario where for an example I want to fit all content on the screen width, and for other scenarios I want to scroll through them. How Can I achieve that ?
Here is my current Implementation:
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
style={styles.container}
contentContainerStyle={styles.containerContainer}
>
<View>
<View style={styles.tabs}>
{Object.keys(tabs).map((item, index) => {
const isSelected = item === selectedTab;
return (
<Tab
key={item}
item={tabs[item]}
select={() => select(index, item)}
setMeasures={(width) => setWidth(width, index)}
isSelected={isSelected}
gap={gap}
/>
);
})}
</View>
<Animated.View
style={[
styles.indicator,
{
transform: [{ translateX: value }],
},
measures[selectedIndex]
? { width: measures[selectedIndex] - gap }
: null,
]}
/>
</View>
</ScrollView>
and here is the stylings
indicator: {
backgroundColor: BURNING_ORANGE,
height: hp(2),
width: 0,
},
label: {
alignItems: 'center',
color: CLOUD_BURST,
fontFamily: CIRCULARMEDIUM,
marginVertical: hp(10),
},
selectedLabel: {
alignItems: 'center',
color: BURNING_ORANGE,
fontFamily: CIRCULARMEDIUM,
marginVertical: hp(10),
},
tab: {
alignItems: 'center',
flex: 1,
flexDirection: 'row',
paddingEnd: wp(20),
},
tabs: {
flexDirection: 'row',
},
Also, If I added flex: 1 to contentContainerStyle of my ScrollView the View just dissappear
When two custom tab bars are used in react-native-tab-view, the width is not getting 100%, ie; in the image shown, there is an extra space after the 2nd tab(On Riding). When more than 2 tabs are there, it works fine. What I expect is to get 50% width for both tab bars without any red space. Screenshot of tab view
---------- TabView
<TabView
navigationState={{index, routes}}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={{width: layout.width}}
renderTabBar={(props) => (
<TabBar
{...props}
scrollEnabled
style={{
borderRadius: 20,
elevation: 0,
backgroundColor: 'red',
}}
renderIndicator={() => null}
onTabLongPress={(scene) => {
const {route} = scene;
props.jumpTo(route.key);
}}
renderTabBarItem={({route, focused, color, scene}) => {
return (
<Pressable
onPress={() => {
props.jumpTo(route.key);
}}
style={[
route.key === props.navigationState.routes[index].key
? Styles.tabBarActive
: Styles.tabBarInActive,
Styles.tabBar,
]}>
<Text
style={[
route.key === props.navigationState.routes[index].key
? Styles.activeTabText
: Styles.inActiveTabText,
]}>
{route.title}
</Text>
</Pressable>
);
}}
/>
---------- Styles.js
tabBar: {
paddingHorizontal: '5%',
paddingVertical: '2%',
alignItems: 'center',
flex: 1,
},
tabBarActive: {
borderRadius: RFValue(25),
backgroundColor: Colors.AppPrimaryThemeColor,
justifyContent: 'center',
},
tabBarInActive: {
backgroundColor: 'green',
justifyContent: 'center',
},
activeTabText: {
color: Colors.AppMainColor,
fontFamily: Fonts.FONT_BOLD,
fontSize: RFPercentage(1.8),
},
inActiveTabText: {
color: Colors.AppPrimaryThemeColor,
fontFamily: Fonts.FONT_MEDIUM,
fontSize: RFPercentage(1.6),
},
Do you really need to scroll between the tabs?
if not, try deleting "ScrollEnabled".
renderTabBar={(props) => (
<TabBar
{...props}
style={{
borderRadius: 20,
elevation: 0,
backgroundColor: 'red',
}}
I have a flatlist that renders a clickable item (with touchable opacity) and an image background with some text in the middle.
The goal is to render a flatlist that looks like this:
I am trying to add light opacity to the image by adding a view with an overlay and I tried multiple solutions but nothing seems to work.
This is what I have achieved so far:
This is the item in the flatlist:
// console.log("item", item.latest_image.media[0].url);
if (item.empty === true) {
return <View style={[styles.item, styles.itemInvisible]} />;
}
return (
<TouchableOpacity
onPress={() =>
this.props.navigation.push(Screens.Photos, {
team: item,
id: this.props.navigation.getParam("team").id
})
}
>
<ImageBackground
style={styles.backgroundImage}
imageStyle={{ borderRadius: theme.borders_MediumRadius.borderRadius, backgroundColor: 'rgba(255,0,0,.6)' }}
source={{ uri: item.latest_image.media[0].url }}
>
<Text style={styles.itemText}>{item.title.toUpperCase()}</Text>
</ImageBackground>
</TouchableOpacity>
);
};
This is the flatlist:
<SafeAreaView style={{ flex: 1 }}>
<ScrollView
style={{ flex: 1, backgroundColor: "black" }}
scrollEnabled={scrollEnabled}
onContentSizeChange={this.onContentSizeChange}
>
<FlatList
data={formatData(this.state.data, numColumns)}
style={styles.container}
renderItem={this.renderItem}
numColumns={numColumns}
scrollEnabled={scrollEnabled}
/>
<FollowUs />
</ScrollView>
</SafeAreaView>
);
and these are the style props:
container: {
margin: 7.5,
backgroundColor: "black"
},
backgroundImage: {
flex: 1,
height: hp("25"),
backgroundColor: "black",
margin: 7.5,
justifyContent: "center",
alignItems: "center"
},
itemInvisible: {
backgroundColor: "transparent"
},
itemText: {
fontFamily: "RobotoCondensed-Bold",
fontSize: RF(4),
color: "black"
},
overlay: {
backgroundColor: "rgba(255,0,0,0.5)",
alignItems: "center",
justifyContent: "center",
flex: 1,
margin: 7.5,
height: hp("25"), // approximate a square
borderRadius: theme.borders_MediumRadius.borderRadius
}
});
If anybody could help me it would be really appreciated!
Thanks
Here's an example of how you can achieve this
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={{
backgroundColor: '#FFF',
height: 200,
width: 200,
position: 'relative'
}}>
<ImageBackground
source={{ uri: 'https://placehold.it/200x200' }}
style={{
height: 200,
width: 200,
opacity: 0.6,
position: 'absolute',
}}
/>
<View
style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Hello World!</Text>
</View>
</TouchableOpacity>
</View>
);
}
}
Here's an example Snack - https://snack.expo.io/#hannigan/lonely-bubblegum
You should also set the activeOpacity on the TouchableOpacity to be the same value as what you will set on the ImageBackground (0.6)
Solved it by adding a view around the text and giving it these props:
<View
style={{
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "rgba(255,255,255,0.75)",
borderRadius: theme.borders_MediumRadius.borderRadius
}}
>
<Text style={styles.itemText}>{item.title.toUpperCase()}</Text>
</View>