I'm learning React Native and am creating a practice app using React Native Boilerplate. I'm trying to pass arguments from a component through to a reducer, but after trying everything I can think of, I am still unable to do so. I'll use the unchanged boilerplate's Counter component as an example.
My current solution has this and works fine:
<TouchableHighlight onPress={increment}>
<Text style={styles.text}>+</Text>
</TouchableHighlight>
However, I want to pass arguments, which would look like this:
<TouchableHighlight onPress={increment(argument)}>
<Text style={styles.text}>+</Text>
</TouchableHighlight>
The latter doesn't work. The function is undefined. My containers, actions, and reducers are in the same format as they appear in the sample app. How do I fix this?
This should work
<TouchableHighlight onPress={(argument)=>increment(argument)}>
Use an arrow function to add a parameter to the call
Related
React native passing multiple styles from parent to child, component, which method is more used? What is the difference?
Rest parameter type,
<Text style={{...styles.title, ...props.style}}>{props.children}
I also found this syntax here:
using array,
<Text style={[styles.title, props.style]}>{props.children}
There are no differences between the two examples. However, the second way is the standard way to combine styles as mentioned in the react-native documentation.
The style prop can be a plain old JavaScript object. That's what we usually use for example code. You can also pass an array of styles - the last style in the array has precedence, so you can use this to inherit styles.
This question has been asked before but it seems like all answers I find deal with class-based components.
I have a component with an onPress handler function as follows:
<Text id="someId" onPress={(e) => console.log(e)}>
Some Text
</Text>
I need to get 'someId' logged out consistently. Currently, I can only get it via:
console.log(e.target._internalFiberInstanceHandleDEV.memoizedProps.id)
This doesn't feel right. Is this the official way of getting the id, or are there different ways? The ones I can find use 'this' which seems to be undefined in functional components.
I am still new to react native and am working on a chat app. I am using <FlatList /> element to display the long list of messages and add inverted prop to it, to show the last messages by default.
But making my FlatList inverted, disturbed the functionality of stickyHeaderIndices that I am using to display the days of the messages (like they do in WhatsApp). Its been two days, I am stuck on this.
I am also attaching the piece of code for <FlatList/> I am using
<FlatList
style={{ flex: 1 }}
data={messageList}
renderItem={this.renderMessage}
keyExtractor={(item, index) => index.toString()}
showsVerticalScrollIndicator={false}
stickyHeaderIndices={stickyHeaders}
inverted
/>
where variable messageList is an array of all the messages, inlcuding the headers I wish to display, this.renderMessage displays the individual message, stickyHeaders is an array with indexes of the headers that are stored in messageList.
I think it is not possible as of now in React Native. I just realized that is maybe why Instagram doesn't provide this feature in their chat.
If someone reading it in the future knows the right implementation or solution for it, please drop by an answer.
For now, I just dropped the idea of using sticky headers on an inverted list in my chat app. Thanks :(
I have an application created by react-native which contains a modal raise from bottom. Now I'm tring to use appium to automate the application and in android it works fine. While in iOS, when I try to use appium inspector on the modal, it just get penetrated and return control below.
<Modal style={styles.bottomModal} isVisible={btmModal} backdropOpacity={0.3} onBackdropPress={this._closeBtmModal}>
<View style={styles.ways}>
<TouchableOpacity accessibilityLabel={IDS.MANUAL_NAV_CAMERA} testID={IDS.MANUAL_NAV_CAMERA} style={styles.line} onPress={() => this._navCamera()}>
<Image style={styles.scan} source={require('../../../resources/images/scan.png')} /><Text style={styles.lineTxt}>扫码绑定</Text>
</TouchableOpacity>
<TouchableOpacity accessible={true} accessibilityLabel={IDS.MANUAL_ADD_TEXT} testid={IDS.MANUAL_ADD_TEXT} style={styles.line} onPress={this._navManualBindMfa}>
<Text style={styles.lineTxt}>手动输入</Text>
</TouchableOpacity>
<TouchableOpacity accessible={true} accessibilityLabel={IDS.MANUAL_ADD_MODAL_CANCEL} testId={IDS.MANUAL_ADD_MODAL_CANCEL} style={[styles.line, styles.cancelline]} onPress={this._closeBtmModal}>
<Text style={styles.cancelTxt}>取消</Text>
</TouchableOpacity>
</View>
</Modal>
Try to get appium inspector working against this modal. Thanks for any suggestion in advance.
Possible strategies to try:
"setting accessible={false} on outer most layer makes child views accessible."
See https://github.com/appium/appium/issues/6517#issuecomment-298037046
If your modal has a transparent background the components behind may will still be marked as visible. I use an environment variable set in the build for testing with appium which removes the transparency option. This does mean that the build being tested is not identical to the normal build
React-Native 0.63
Desktop Appium 1.22.0
Appium Inspector 2022.1.2
In our project the obstacle was the element Pressable. Setting property accessible={false} to it fixed an ability for Appium to find elements on modal windows as well. <TouchableOpacity accessible={false}> also plays role for finding elements on screens.
I have to highlight that Appium Inspector's screenshot view still won't recognize elements, but its searching functionality ('id' for iOS) finds them.
Up until now, I was under the impression that if Appium Inspector does not render a component then it means it does not see it, therefore I won't be able to use it in tests.
As it turns out, its searching engine can still find such a component, and therefore we can use it in tests, although sometimes it requires adding additional props to certain components, like accessible={false} or a testID to a parent component.
I have a quick question about the user's long press action that hits the specific word and shows the meaning of words by requesting api to a dictionary service.
The below is the current way the app renders the components. Because the app has to load many words at the same time, I was not able to wrap all words with each because it drastically slows down the app.
I want This Wordthis word to be reactive to long press.
<View>
<Text>I want <Text>This Word</Text>this word to be reactive to long press.</Text>
</View>
<View>
<Text>I want <Text>This Word</Text>this word to be reactive to long press.</Text>
</View>
We can't not destroy the current form of the rendering. But if there is a way to destroy it temporarily and recover it after query (dictionary api), then that will be also fascinating.
Please share any ideas with me please!