I am new to React Native. If I asked something so easy sorry 'bout that.
I have Picker Component in my App.js.
I want to go to component depending on a Picker item.
So, for example; I picked the second item of Picker, when I Clicked the 'Next' button it has to go to second.js
Here is some Part of my Code:
My App.js:
...
...
function Third({ navigation }) {
return (
<View style={styles.container}>
<Text style={styles.circle}>2</Text><Text style={styles.titles}>Operating Mode</Text>
<Text />
<Text style={styles.description}>Please select operating mode</Text><Text/>
<Picker/>
<Button title="Next" style={styles.buttons} color="#FF7F11" onPress={() => navigation.navigate("Fourth")}/><Text/>
<Button title="Back" style={styles.buttons} color="#FF7F11" onPress={() => navigation.goBack()} /><Text/>
</View>
);
}
...
...
and my Picker.js:
import React, { Component } from "react";
import { Text, View, StyleSheet } from "react-native";
import { Picker } from "#react-native-picker/picker";
class Picker extends Component {
state = {router: ''}
updaterouter = (router) => {
this.setState({ router: router })
}
render() {
return (
<View>
<Picker selectedValue={this.state.router} style={styles.drop} onValueChange = {this.updaterouter}>
<Picker.Item label="Rt" value="rt" />
<Picker.Item label="Ap" value="ap" />
<Picker.Item label="Rp" value="rp" />
<Picker.Item label="Wp" value="wp" />
</Picker><Text></Text>
</View>
);
}
}
export default Picker
const styles = StyleSheet.create({
drop: {
height: 30,
width: 200,
backgroundColor: "#FFF"
}
})
One option is to pass the value to the parent via a callback function, something like this:
updaterouter = (router) => {
this.setState({ router: router })
props.onRouterUpdated && props.onRouterUpdated(router)
}
<Picker onRouterUpdated={(r)=>{/*do something with r*/}}/>
Another would be to use common store (e.g. Redux)
I have a flatlist and inside flatlist I Have a radioform. I have 2 items of radioform 'P' and 'A' Here is the picture of that
Here I need to post the selected item.My Problem is if I select P then all row value is P when I post and if I select A all row value is A . I have a logic that I have to get the row id wise state get to post . Here so far I have code
export default class attendancetest extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
rollno:"",
typeofattendance:1,
animating: true
};
}
componentWillMount() {
this.fetchData();
}
fetchData = async () => {
const response = await
fetch("http://192.168.1.208:8082/students/all");
const json = await response.json();
this.setState({ data: json });
};
closeActivityIndicator = () =>
setTimeout(
() =>
this.setState({
animating: false
}),
4000
);
componentDidMount = () => this.closeActivityIndicator();
render() {
const animating = this.state.animating;
return (
<View
style={--Style Code
}
>
<Logo />
<Text style={styles.titleText1}>
Test Section A Class 11th
</Text>
<ActivityIndicator
--Some Code
/>
<View style={styles.container}>
<Text style={styles.titleText}>Roll & Name Present Or Absent</Text>
</View>
<FlatList
data={this.state.data}
// rollno={this.state.data.rollno}
showsVerticalScrollIndicator={false}
renderItem={({ item,index }) => (
<View
style=--Style Code
>
<Text
style=--style code
>
{item.rollno}
--
{item.name}
</Text>
<RadioForm
animation={true}
buttonColor={"#C2E3A9"}
index={1}
formHorizontal={true}
labelHorizontal={true}
buttonStyle={{ marginRight: 20 }}
radioStyle={{ paddingRight: 20 }}
// labelHorizontal={false}
style={{
flex: 1,
paddingRight: 20,
flexDirection: "row",
width: 30
}}
radio_props={radio_props}
initial={this.state.typeofattendance}
// initial={value => {
// this.setState({ value: value });}}
isSelected = {true}
// radio_props
onPress={value => { index=
this.setState({ typeofattendance: value });
}}
ItemSeparatorComponent={this.renderSeparator}
/>
</View>
)}
// keyExtractor={(x, i) => i}
keyExtractor={(item, index) => index.toString()}
/>
<Button title="Submit" onPress={() => this.insert()} />
</View>
);
}
insert = () => {
var numstudent = this.state.data.length;
var datatest=[]
var data1;
for(var i=0;i<numstudent;i++){
data1={"rollno": this.state.data[i].rollno, "typeofattendence":
this.state.typeofattendance};
datatest.push(data1);
}
console.log(datatest);
}
}
Here this portion I can get P to A but not in particular row
</View>
onPress={value => {
this.setState({ typeofattendance: value });
}}
How to get row wise state get inside flatlist .
Here in these portion I check the radiobutton check item in button click
var numstudent = this.state.data.length;
var datatest=[]
var data1;
for(var i=0;i<numstudent;i++){
data1={"rollno": this.state.data[i].rollno, "typeofattendence": this.state.typeofattendance};
datatest.push(data1);
}
// console.log(datatest);
I want to set different click listeners on different words of . Currently what i have is
<Text>Android iOS React Native<Text>
Now i want to know when user click on Android, iOS and React Native, i have to perform some analytics on that so need click listeners for seperate words.
Does any one have idea about it? I have checked this thread but i din't found it useful for my requirement.
Update
String i have given is just an example string, in real time i will be getting dynamic strings.
This is what i will be getting as dynamic string
{
"str":"Hi i am using React-Native, Earlier i was using Android and so on"
"tagWords":["React-Native","Android"]
}
And in output i want, "Hi i am using React-Native, Earlier i was using Android and so on"
with click event on "React-Native" and "Android". Is is possible?
The post you sent is the simplest way you can achieve the desired behavior. Sinse you need to have different listeners you need to implement different Text components.
Example
export default class App extends Component {
onTextPress(event, text) {
console.log(text);
}
render() {
return (
<View style={styles.container}>
<Text>
<Text onPress={(e) => this.onTextPress(e, 'Android')} style={styles.red}>{'Android '}</Text>
<Text onPress={(e) => this.onTextPress(e, 'iOS')} style={styles.purple}>{'iOS '}</Text>
<Text onPress={(e) => this.onTextPress(e, 'React Native')} style={styles.green}>{'React Native'}</Text>
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
red: {
fontSize: 20,
color: 'red'
},
purple: {
fontSize: 20,
color: 'purple'
},
green: {
fontSize: 20,
color: 'green'
}
});
Update 1 (Dynamic text)
render() {
const fixedString = 'I\'m a fixed string that slipleted';
const arrayOfStrings = ['These', 'are', 'strings', 'from', 'array'];
return (
<View style={styles.container}>
<Text style={styles.textContainer}>
{
fixedString.split(' ').map((str, index) => {
return (
<Text onPress={(e) => this.onTextPress(e, str)}>
{`${str}${index !== (fixedString.split(' ').lenght -1) && ' '}`}
</Text>
)
})
}
</Text>
<Text style={styles.textContainer}>
{
arrayOfStrings.map((str, index) => {
return (
<Text onPress={(e) => this.onTextPress(e, str)}>
{`${str}${index !== (arrayOfStrings.lenght -1) && ' '}`}
</Text>
)
})
}
</Text>
</View>
);
}
Update 2 (for example dynamic data)
removePunctuation = (text) => {
// this is a hack to remove comma from the text
// you may want to handle this different
return text.replace(/[.,\/#!$%\^&\*;:{}=\_`~()]/g,"");
}
render() {
const arrayOfObjects = [{
str: 'Hi i am using React-Native, Earlier i was using Android and so on',
tagWords: ['React-Native', 'Android']
}];
return (
<View style={styles.container}>
<Text style={styles.textContainer}>
{
arrayOfObjects.map((obj) => {
return obj.str.split(' ').map((s, index) => {
if ( obj.tagWords.indexOf(this.removePunctuation(s)) > -1 ) {
return (
<Text onPress={(e) => this.onTextPress(e, s)} style={styles.red}>
{`${s} ${index !== (obj.str.split(' ').lenght - 1) && ' '}`}
</Text>
)
} else return `${s} `;
})
})
}
</Text>
</View>
);
}
all you need to use is TouchableOpacity(for the tap effect and clicks), View for the alignment of texts. and certain styling. I am providing you the code snippet that will work for you , all other syntax will remain same
import {Text, View, TouchableOpacity} from 'react-native'
<View style={{flexDirection:'row'}}>
<TouchableOpacity onPress={{()=>doSomethingAndroid()}}>
<Text>Android</Text>
</TouchableOpacity>
<TouchableOpacity onPress={{()=>doSomethingiOS()}}><Text> iOS</Text>
</TouchableOpacity>
<TouchableOpacityonPress={{()=>doSomethingReactNative()}}><Text> React Native</Text>
</TouchableOpacity>
</View>
i hope this works, comment back if any issue happens
You can wrap each clickable words into 'TouchableOpacity' component, and tract the onPress event as follows
<View style={{flexDirection: 'row'}}>
<TouchableOpacity onPress={() => {
console.log('Android Clicked');
}}>
<Text>Android</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => {
console.log('iOS Clicked');
}}>
<Text>Ios</Text>
</TouchableOpacity>
</View>
Please do adjust the spacing between words.
Edit:
For dynamic string you can proceed as follows
...
handleWordClick(str, handler) {
var words = str.split(' '), // word separator goes here,
comp = [];
words.forEach((s, ind) =>{
comp.push(
<TouchableOpacity key={ind} onPress={() => handler.call(this, s)}>
<Text>{s}</Text>
</TouchableOpacity>
);
})
return comp;
}
render() {
var comp = this.handleWordClick('Android iOS React-Native', (word) => {
//handle analytics here...
console.log(word);
});
return (
<View>
...
<View style={{flexDirection: 'row'}}>
{comp}
</View>
...
</View>
)
}
I am not sure what will be your word separator as the example you have given has 'React Native' as single word. Please pay attention on this part.
Hope this will help you.
Trying use this.props.navigator.showInAppNotification
this.props.navigator.showInAppNotification({
screen: "example.InAppNotification",
passProps: {
title: 'Title',
body: 'Body...'
},
position: 'bottom',
autoDismissTimerSec: 3
});
screen InAppNotification is registered, but see notification with blank content:
Can anyone help with this?
example.InAppNotification:
export default class InAppNotification extends Component {
render() {
console.log(this.props);
return (
<View>
<Text>
{JSON.stringify(this.props)}
</Text>
</View>
);
}
}
try by adding flex:1 to container View
export default class InAppNotification extends Component {
render() {
console.log(this.props);
return (
<View style={{ flex: 1 }}>
<Text>
{JSON.stringify(this.props)}
</Text>
</View>
);
}
}
also you need to register InAppNotification screen correctly
I'm pretty sure this is straightforward, but I can't quite see how to bring it together. At the moment my app works perfectly in iOS, but I've used a few controls which are not Android compatible:
<View style={containerStyle}>
<Text style={labelStyle}>Drink:</Text>
<SegmentedControlIOS
tintColor={styleBackground}
style={{ flex: 2 }}
values={['Value1', 'Value2']}
selectedIndex={this.state.drink}
onChange={(event) => {
this.setState({ drink: event.nativeEvent.selectedSegmentIndex });
}}
/>
<View style={{ flex: 1 }} />
</View>
I want to use the React-Native-Segmented-Android library to fix this. I feel like I should be able to do something like:
<View style={containerStyle}>
<Text style={labelStyle}>Drink:</Text>
const Component = Platform.select({
ios: () => require('SegmentedControlIOS'),
android: () => require('react-native-segmented-android'),
})(
tintColor={styleBackground}
style={{ flex: 2 }}
values={['Value1', 'Value2']}
selectedIndex={this.state.drink}
onChange={(event) => {
this.setState({ drink: event.nativeEvent.selectedSegmentIndex });
}}
/>);
<View style={{ flex: 1 }} />
</View>
but that (perhaps unsurprisingly) doesn't work. Can anyone point me to the correct method? I know I can just use two different files for iOS/Android but I'd rather keep it together in one if possible.
I would create a sepeare component and this component would return segment according to platform but you can create an inner function as an alternative. call this function in render to handle decide which platform app runs and return segment according to platform.
_segmentPicker() {
if (Platform.OS == 'android') {
return (
<SegmentedControlIOS
tintColor={styleBackground}
style={{ flex: 2 }}
values={['Value1', 'Value2']}
selectedIndex={this.state.drink}
onChange={(event) => {
this.setState({ drink: event.nativeEvent.selectedSegmentIndex });
}}
/>
);
} else if (Platform.OS == 'ios') {
return (
<SegmentedControlIOS
tintColor={styleBackground}
style={{ flex: 2 }}
values={['Value1', 'Value2']}
selectedIndex={this.state.drink}
onChange={(event) => {
this.setState({ drink: event.nativeEvent.selectedSegmentIndex });
}}
/>
);
}
}
render(){
return (
<View>
{this._segmentPicker()}
.
.
</View>
);
}