I tried to create an app using react native and used the following code to switch between different views in ViewPagerAndroid:
_onPressButton = (position) => {
this.refs.viewPage.setPage(position);
}
render() {
return (
<ViewPagerAndroid
style={styles.viewPager}
initialPage={0}
ref="viewPage"
>
<View style={styles.pageStyle} key="1">
<Text
style={{ fontSize: 24 }}
>
Spring
</Text>
<Image
source={{ uri: 'https://media.defense.gov/2016/Apr/06/2001512498/780/780/0/160406-F-PM645-019.jpg' }}
style={{ width: 420, height: 230 }}
/>
<Button
onPress={this._onPressButton.bind(this, 2)}
title="Summer"
color="#841584"
/>
</View>
<View style={styles.pageStyle} key="2">
<Text
style={{ fontSize: 24 }}
>
Summer
</Text>
<Image
source={{ uri: 'https://i2.wp.com/gothe-extramile.com/wp-content/uploads/2017/05/kinkakuji002.png?resize=600%2C450&ssl=1' }}
style={{ width: 420, height: 230 }}
/>
<Button
onPress={this._onPressButton.bind(this, 1)}
title="Spring"
color="#841584"
/>
</View>
</ViewPagerAndroid>
);
}
I expected to switch from Spring to Summer and vice versa. However, the button in Summer cannot go back to Spring. Any comment would be appreciated very much.
Related
I want to fix an icon inside <ScrollView at right bottom as shown below
But currently , the + icon is moving along with other contents. I want it to be fixed at that position even when other contents go down in the background. Current behaviour
Tried solution :
I used contentContainerStyle={{flexGrow :1}} in the ScrollView , still it doesnt work .
It works when I add the icon outside ScrollView. But it doesn't give expected results which is shown below it cuts the scrolliew content right above the icon:
Can anyone suggest with good solution for this scenario?
Code :
<ScrollView>
{this.state.alertData &&
this.state.alertData.map((item, index) => {
return (
<View>
<TouchableOpacity
style={styles.alertContainer}
onPress={() => this.onCardClick(index, true)}
>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
}}
>
<Text style={styles.title}>{item.title}</Text>
<View
style={{
flexDirection: "row",
}}
>
<Text style={styles.sideText}>Il y a 2h</Text>
{item.status && (
<Away style={{ marginLeft: 5, marginTop: 6 }} />
)}
</View>
</View>
<View style={{ marginBottom: 10 }}>
<Text style={styles.primaryText}>{item.primaryText}</Text>
<Text style={styles.secondaryText}>
{item.secondaryText}
</Text>
</View>
<View>
<Text style={styles.primaryText}>Message</Text>
<Text style={styles.secondaryText}>{item.message}</Text>
</View>
{this.state.selectedCard[index] && (
<Image
style={{ height: 250, width: 300 }}
// source={require("../../../assets/images/image6.jpeg")}
source={item.image}
/>
)}
</TouchableOpacity>
<Close
style={{ top: 10, right: -5, position: "absolute" }}
onPress={() => this.toggleModal(index)}
/>
</View>
);
})}
<View
style={{ alignItems: "flex-end", marginTop: 20, marginBottom: 20 }}
>
<AddnewAlerts />
</View>
</ScrollView>
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 have 2 texts which i want to navigate to different pages with but i need an image in between them...but the text thats above the image (in this case "wc collar") does not navigate and is not clickable but when i remove the image it works...i even tried removing the touchable opacity and just adding the onpress to the text but it still produces the same result
<View>
<View style={styles.container}>
<View>
<TouchableOpacity
onPress={() => navigation.navigate('Collar')}
style={{ width: 90, height: 40 }}
>
<Text style={styles.textstyle}> WC COLLAR</Text>
</TouchableOpacity>
</View>
<View>
<TouchableOpacity
onPress={() => navigation.navigate('Circlet')}
style={{ width: 90, height: 40 }}
>
<Text style={styles.textstyle2}> WC CIRCLET</Text>
</TouchableOpacity>
</View>
</View>
<View style={styles.container}>
<Image
source={require('../images/portlog.png')}
style={{ width: 1366, height: 650, position: 'absolute', top: 200 }}
/>
<StatusBar style="auto" />
</View>
</View>
I have a problem when I try to render an image inside the React Native Maps Callout.
The image does not render.
{this.state.database.map((route, idx) => {
if (route.Image) {
return (
<MapView.Marker
coordinate={{ latitude: Number.parseFloat(route.Latitude), longitude: Number.parseFloat(route.Longitude) }}
key={idx}
image={img_pin}
ref={(ref) => this.marker = ref}
>
<MapView.Callout tooltip style={{ flex: 1, backgroundColor: 'white' }}>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1 }}>
<Text style={styles.textCallout}>Latitude: {route.Latitude}</Text>
<Text style={styles.textCallout}>Longitude: {route.Longitude}</Text>
<Text style={styles.textCallout}>Status: <Icon name={route.Status === 1 ? 'checkmark-circle' : 'close-circle'} style={{ color: route.Status === 1 ? 'green' : 'red', fontSize: 16 }} /> </Text>
<Text style={styles.textCallout}>Velocidade: {route.Speed} km/h</Text>
</View>
<View style={{ margin: 5 }}>
<Image source={{ uri: `data:image/gif;base64,${route.Image}` }} style={{ width: 150, height: 100 }} />
</View>
</View>
</MapView.Callout>
</MapView.Marker>
);
}
})}
Image error don't render inside Callout
"react-native": "^0.57.8",
"react-native-maps": "^0.24.2",
Use Image inside Text component
<Text> <Image style={{ height: 100, width:100 }} source={{ ... }} resizeMode="cover" /> </Text>
Another workaround by using WebView. I think is the proper solution for this right now.
<View>
<WebView style={{ height: 100 , width: 230, }} source={{ uri: ... }} />
</View>
Make sure your route.image is in the form of url schema,
exampleData
source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
if correct,
GIF and WebP support on Android
When building your own native code, GIF and WebP are not supported by default on Android.
You will need to add some optional modules in android/app/build.gradle, depending on the needs of your app.
build.gradle:
dependencies {
// If your app supports Android versions before Ice Cream Sandwich (API level 14)
implementation 'com.facebook.fresco:animated-base-support:1.10.0'
// For animated GIF support
implementation 'com.facebook.fresco:animated-gif:1.10.0'
// For WebP support, including animated WebP
implementation 'com.facebook.fresco:animated-webp:1.10.0'
implementation 'com.facebook.fresco:webpsupport:1.10.0'
// For WebP support, without animations
implementation 'com.facebook.fresco:webpsupport:1.10.0'
}
Usage
<MapView.Callout tooltip={true} style={{ backgroundColor: 'white', height: contentHeight, width: contentWidth }}>
<View style={{ flexDirection: 'column' }}>
<View style={{ flex: 1 }}>
<Text style={styles.textCallout}>Latitude: {route.Latitude}</Text>
<Text style={styles.textCallout}>Longitude: {route.Longitude}</Text>
<Text style={styles.textCallout}>Status: <Icon name={route.Status === 1 ? 'checkmark-circle' : 'close-circle'} style={{ color: route.Status === 1 ? 'green' : 'red', fontSize: 16 }} /> </Text>
<Text style={styles.textCallout}>Velocidade: {route.Speed} km/h</Text>
</View>
<Image source={{ uri: `data:image/gif;base64,${route.Image}` }} style={{ width: 150, height: 100, resizeMode="cover" }} />
</View>
</MapView.Callout>
I have build React Native App and I face Problem for "Api" t did not give
me an error but i gives me a warring or Each items should have unique key I
didn't find any solution for how i solve this.
how to I use unique key in function
**
How to fix reactjs warning: each child in an array should have a unique prop…? 2**
<View style={styles.contanier}>
{this.props.data.map(function(videoData, index) {
console.log(videoData, "fetch3");
return (
<View style={styles.card_contanier}>
<TouchableOpacity
style={{ flex: 1 }}
// onPress={() => this.onforward()}
>
<View style={{ height: "45%" }}>
<Image
source={require("../img/special-page-banner.jpg")}
style={{
flex: 1,
width: imageWidth,
resizeMode: "stretch"
}}
/>
</View>
<View style={styles.title}>
<Text
style={{ color: "black" }}
numberOfLines={2}
ellipsizeMode={"tail"}
>
{videoData.name}
</Text>
</View>
<View style={{ height: "20%" }}>
<View style={styles.buttom_contanier}>
<View style={styles.logo}>
<Thumbnail
source={require("../img/andy-sm.png")}
style={{ height: 32, width: 32 }}
/>
</View>
<View style={{ flexDirection: "column" }}>
<View style={{ flexDirection: "row", left: 5 }}>
<Text
style={{ color: "black" }}
numberOfLines={1}
ellipsizeMode={"tail"}
>
{videoData.created_by_user.name}
</Text>
</View>
<View style={styles.iconic_contanier}>
<Icon name="calendar" size={10} style={{ top: 2 }} />
<Text style={styles.text}>10 Oct 2018</Text>
</View>
<View style={styles.iconic_contanier}>
<Icon name="eye" size={10} style={{ top: 2 }} />
<Text style={styles.text}>11 views</Text>
</View>
</View>
</View>
</View>
</TouchableOpacity>
</View>
);
})}
</View>
First and not the recommended approach will be tu use your index you get as second argument in your .map callback
<View style={styles.contanier}>
{this.props.data.map(function(videoData, index) {
console.log(videoData, "fetch3");
return (
<View key={index} style={styles.card_contanier}>
But using index is not recommended. If you have an id coming from your backend I will use it. This can cause problem with animation and thing like that if you use index.
<View style={styles.contanier}>
{this.props.data.map(function(videoData, index) {
console.log(videoData, "fetch3");
return (
<View key={videodata.id} style={styles.card_contanier}>
You can read about all this here https://reactjs.org/docs/lists-and-keys.html#keys
And article here about why not use index https://medium.com/#robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318