I want to know how to declare and get ID in View.
I tried using both ref and nativeID, but I can't read them on android.
How can I get View's ID in Android?
Please let me know if there is a way to specify a View even if it is not an ID.
What I'm trying to do with this is like event delegation in JS.
...
<Pressable
...
onPress={(e) => ...I want to get the Views' ID}
>
<View
...
nativeID={"view2"}
pointerEvents={"box-only"}
></View>
<View
style={styles.container3}
nativeID={"view3"}
pointerEvents={"box-only"}
></View>
</Pressable>
...
please help me..
Related
hello I am new to react native I have given a task to create an image slider as shown in the picture
I have not found any library matching this design so I want to create a custom carousel how can I create this. Any sort of help will be appreciated.
Can you provide more details as to what is the requirements of this?
Seems like you are trying to create introductory slides in the app.
This plugin is really flexible and customisable. You might want to check this one out.
https://www.npmjs.com/package/react-native-app-intro-slider
Also if you desire to make a custom slider, you can use ScrollView and use the following configuration to the scrollView
<ScrollView
style={{ flex: 1 }}
pagingEnabled={true}
horizontal={true}
scrollEventThrottle={16} >
<View>
<Text>Screen 1</Text>
</View>
<View>
<Text>Screen 2</Text>
</View>
</ScrollView>
Tag me if you have any more questions regarding this.
Give this article a read to understand it better.
https://medium.com/backticks-tildes/create-a-custom-app-intro-slider-in-react-native-4308fae83ad1
Hi everyone I want to design UI like this image.but I don't know to design list like that to get value in seekbar(Slider) all item?Please help me thank a lot !!
You can check this official react native package rn-slider Good documentations. you will get the slider there. and for images, you just put them in flexDirection:'row' along with the slider component.
hope it helps. feel free for doubts
I couldn't understand what exactly you need but if you need to access value on slidebar, you can define a state like SliderValue and pass it to value and onValueChanged props in Slider :
render() {
return (
<View style={[styles.container, { backgroundColor: this.state.ColorHolder }]} >
{/*Text to show slider value*/}
<Text style={styles.headerText}>Value of slider is : {this.state.sliderValue}</Text>
{/*Slider with max, min, step and initial value*/}
<Slider
maximumValue={100}
minimumValue={0}
minimumTrackTintColor="#307ecc"
maximumTrackTintColor="#000000"
step={1}
value={this.state.sliderValue}
onValueChange={(sliderValue) => this.setState({ sliderValue })}
style={{ width: 300, height: 40 }}
/>
</View>
);
}
I'm a newbie to react native. I try to add a flatlist to my app.
I hava an array of datas designed like that:
["https://hi.com//image.png", //uri
"hello",
"https://hi.com//image2.png",
"welcome",
"https://hi.com//image3.png",
"great",
../..
]
Problem is that my image shows up but the text in the right side is actually my uri stringyfied.
I think there's something wrong with the keyExtractor:
renderItem =({item}) => {
return(
<View style ={{flex:1, flexDirection:'row'}}>
<Image source ={{uri: item}}/>
<View style ={{flex:1, justifyContent: 'center'}}>
<Text>{item}</Text>
</View>
</View>
)
}
render() {
return (
<View style={styles.mainContainer}>
<FlatList
data= {this.state.dataSource}
keyExtractor={(item,index) => index.toString()}
renderItem= {this.renderItem}
/>
</View>
);
}
your renderItem function loops thru every single element of array, not sure its the best option for your kind of data, maybe try to use something like this instead
const data = [{uri: 'https://link.io', text: 'hello'},{uri: 'http://anotherlink.co', text: 'bye'}]
then inside your renderItem fuction pass data:
<Image source ={{uri: item.uri}}/>
<Text>{item.text}</Text>
on the other hand if your you need to keep flat array, maybe be write some function with modulo of deviding index by 2 and from there get what goes where, but not sure why would you need that apart maybe from codewars challange ;)
good luck, hope this helps
your flatlist render item is trying to access the item in a loop.so everytime it gets looped,you are passing item to Image and item to Text.As #wijuwiju suggested,that is the best way to implement it.try to maintain keys to your data.Then your flatlist will render properly.
Store Item Like this:
profilePicture: 'https://picsum.photos/200',
Set Image Source Like this:
<Image source={{uri:profilePicture}}/>
t try this code
<View style={styles.container}>
<StatusBar
backgroundColor="blue"
barStyle="light-content"
/>
<Text> just test </Text>
</view>
but then i run through expo its give a error
Cannot add a child that doesn't have a YogaNode to a parent without a
measure function!
i dont know why how can i fix this error ?
note:i try in android phone using exop link like exp://dd.**:80
I have made the status bar with some CO2 visualization content.
This is the source code: https://github.com/JyotibenSapariya/CO2-Visualization-
you can check it.
Its based on javascript so I hope you can use it.
thanks...
Has anyone ever implemented some sort of image slide show in React Native? I've currently been trying to implement React Native Swiper ( https://github.com/leecade/react-native-swiper ) and while it works, the performance switching picture to picture has a very choppy feel.
Is there any sort of solution for Picture Slideshows that other people have worked with. Ideally it would be dynamic so I could load in views upon loading the system
Any advice would be spectacular!
Right now here is my current implementation, it works.. but it isnt great. Figured this is pretty much irrelevant but decided to include it anyways just in case someone would want to see it
PictureFeed(){
var array = ["pic1","pic2","pic3","pic4"];
let Arr =array.map((a, i) => {
return(
<View key={i} style={styles.slide}>
<Image source={{uri: {a}.a }} style={styles.image} />
</View>
);
})
return(
<Swiper style={styles.wrapper} showsButtons={true}>
{Arr}
</Swiper>
);
}