Is it possible to have a voiceOver on a View and its child Component? I try to use a voiceOver on a parent View and its child component and write it like this
<View accessible={true} accessibilityLabel={'Parent View!'}>
<Text accessible={true} accessibilityLabel={'First Text'}>text one</Text>
<Text accessible={true} accessibilityLabel={'Second Text'}>text two</Text>
</View>
This one only read the voiceOver of view(Parent)
<View accessibilityLabel={'Parent View!'}>
<Text accessible={true} accessibilityLabel={'First Text'}>text one</Text>
<Text accessible={true} accessibilityLabel={'Second Text'}>text two</Text>
</View>
This code only read the voice over of the child and skipped the parent View
is there any solution to this issue ?
I'm pretty sure that all elements have accessible={true} by default. I believe that you setting it to true is causing the problem. Try removing the accessible tags.
When an element has the property accessible={true}, it’s actually makes the children of that element inaccessible.
I found this article helpful: https://medium.com/#larenelg/creating-inclusive-apps-in-react-native-the-coding-bit-bd3832349009
Related
I have placed Flatlist and save button inside scrollview and each Flatlist item has a input field.
When the input field is in focus and keyboard is open.
When I touch the save button first time it is dismissing the keyboard and next time when the user clicks on button action is performed.
I have tried adding keyboardShouldPersistTaps ={'handled'}
In scrollview and flatlist.
But it is not working.
Please find my pseudo code below.
<Scrollview>
<TouchableWithoutFeedback>
<View>
<Flatlist/>
<TouchableOpacity>
</TouchableOpacity>
</View>
</TouchableWithoutFeedback>
</Scrollview>
Please help me resolving this issue.
You can use this props in your Scrollview Component,
keyboardShouldPersistTaps='always'
keyboardDismissMode='on-drag'
i have a question about recoil. In my app a have few screens. There are a lot of Text Components. I am doing dark mode now and i try to use recoil for this. I have atom isDarkMode, which can be false or true. There is a problem. Is needed to check in every Text component( I have around 50 for all app) in style => {isDarkMode ? darkModeStyles: lightModeStyles}. In all Text Components i need to have same style in darkMode... Now I just repeat this in every TextComponent. Is the way to manage this in smarter way, to avoid repeating?
I mean like pass this styles from parent or sth like that? or I just need to do like I am doing now?
I have switch in settings, so if this switch is true i want dark mode, if false I want light mode. So will is other method rather than checking if this switch state is true or false in every Text Component? Now i have sth like this
<Text style={{isDarkMode ? darkModeStyles: lightModeStyles}}> Some text </Text>
<Text style={{isDarkMode ? darkModeStyles: lightModeStyles}}> Some text </Text>
<Text style={{isDarkMode ? darkModeStyles: lightModeStyles}}> Some text</Text>
<Text style={{isDarkMode ? darkModeStyles: lightModeStyles}}> Some text </Text>
etc. and a lot other text comp in few screens
if I am able to manage all texts at the same time? I mean avoid writing this "{isDarkMode ? darkModeStyles: lightModeStyles}" in every comp. If not, maybe some way to shortening this provision
You can make a simple reusable component:
...import all the dependencies that you need
export const ThemeDependentText = ({children}) => {
return (
<Text style={{isDarkMode ? darkModeStyles: lightModeStyles}}> {children} </Text>
)
}
and then you can use it anywhere with a custom text, with the theme condition applied to every component:
...
import { ThemeDependentText } from 'ThemeDependentText'
...
<ThemeDependentText> YAY </ThemeDependentText>
I want to nest multiple touchable components for creating something similar to facebook post where user can press on avatar image or user name and navigate to user profile,also user can press on rest of the card and navigate to single post screen. When i nest multiple component and press on child(ie Avatar/User name component) component, the touch gets propagated from child to parent ie parent's onPress event also gets triggered. How do I handle this situation??
In the example below if I press on AvatarComponent then both the child's and parent's onPress event gets triggered. I only want child's onPress be trigerred when I press on Child.
<TouchableOpacity onPress={() => console.log('parent component')}>
<TouchableOpacity onPress={() => console.log('child component')}>
<AvatarComponent />
</TouchableOpacity>
<TouchableOpacity onPress={() => console.log('child component')}>
<UsernameComponent />
</TouchableOpacity>
</TouchableOpacity>
Try changing the import to "react-native" in case you are using gesture handler:
import { TouchableOpacity } from 'react-native'
try passing zIndex:999 in style of child component.
I have beed searching for a while to find a react native modal, popup, or even an alert that can actually render a custom component, rather than simple text.
What i actually want to do is throw a modal with a 5-star rating component, but neither of the packages i have added support that.
Thanks in advance
this is my solution which you can put anything inside View:
import Modal from "react-native-modal";
<Modal isVisible={this.state.alertState} onBackButtonPress={()=>this.setState({alertState:false})} >
<View style={styles.modal}>
<Text style={styles.modalText}>modal Text!</Text>
<TouchableOpacity onPress={()=>this.setState({alertState:false})} style={styles.modalButton}>
<Text style={styles.modalButtonText}>Ok!</Text>
</TouchableOpacity>
</View>
</Modal>
and here is style:
modal:{
backgroundColor:'white',height:.2*DEVICE_HEIGHT,alignItems:'center',width:.9*DEVICE_WIDTH,justifyContent:'center',borderRadius:10},
modalText:{
fontFamily:'IRANYekanMobileFN',padding:10},
modalButton:{
backgroundColor:'#306BF4',width:.25*DEVICE_WIDTH,height:.05*DEVICE_HEIGHT,alignItems:'center',justifyContent:'center',marginTop:20,borderRadius:10},
modalButtonText:{
fontFamily:'IRANYekanMobileFN',color:'white'}
I am a little baffled here ..
I have some code like this
renderTopic(topic){
if(topic.isMine){console.log('work?')}
return (
<View key={topic.id.toString()} >
<TouchableOpacity onPress={() => this.addToic.call(this, topic)} >
{topic.isMine && <Topic topic={topic} active={true}/>}
{!topic.isMine && <Topic topic={topic} active={false}/>}
</TouchableOpacity>
</View>
)
}
render() {
console.log("re-rendering", this.props.myTopics)
return (
<View style={s.welcome}>
<ScrollView>
<View style={s.topics}>
{this.props.me.myTopics.map(topic => this.renderTopic(topic) )}
</View>
</ScrollView>
</View>
)
}
The problem is when I update topics using the traditional redux -> 'dispatch action' method, the re-render function fires, the should component update function fires, everything looks like it works but the topic.isMine conditional rendering never updates and switches the components over.
The correct result is displayed if I change page, the app then re-renders correctly.
Probably your reducer does not create new topic object. React sees, that reference to new topic matches old topic and skips calling renderTopic(topic) with same reference value as before.