I was wondering if anyone has worked with this issue before.
Issue: I have a Custom Pressable Card Component (Wrapped over a TouchableOpacity) which would had other Views and Texts components along with another nested Touchable Opacity. The UI works for except when using VoiceOver.
What ends up happening is that the accessibility label on the parent takes over and the nested Text and View are merged together along with the button making it hard for blind users to distinguish the nested button.
I think it may be a design issue but wondering if there is a way of working around this.
using this photo as an example .
<TouchableOpacity accessibilityLabel= "User Profile Card">
<Image accessibilityLabel= "User Profile Photo" />
<Text>Beverly Little </Text>
<Text>Javascript Developer</Text>
<Text>Lorem Ipsum dolor sit amet....</Text>
</TouchableOpacity>
Related
I designed a page and I have a Flatlist and I have pickers, slider and text input in this page. I also used Animated View in this page and I have an issue with KeyboardAvoidingView.
The design looks like this when the page is first rendered:First Render
When user click "Add" Icon the page looks like this:
Animation Triggered and View Flex Grow
And here is my main issue. When user click the TextInput for type something. This page looks like this:
TextInput Focused
You can also see my render code in this photo.JSX Code
I tried placing "keyboardavoidingview" in different places but my problem was not solved. How can I solve this?
P.S: The animation value based on "flex" property. The view has "0.5" flex value on first start and When the button is clicked, it takes the value "1".
wrap your code inside
<KeyboardAvoidingView>
</KeyboardAvoidingView>
And give it a style like this
flex: 1,
behavior="padding"
Kolay gelsin :)
We are working on an app where a user can read a document, highlight as section and leave a comment. We've tried a few libraries for text highlighting and ultimately built our own, however most of the npm packages I see follow a similar approach: use a TextInput but make uneditable.
We have highlighting working, but the problem is the user needs to be able to see their previous comments by clicking on the section they highlighted. However, onPress on the Text elements within the TextInput don't work.
Here's a trivial example
<TextInput>
<Text onPress={() => console.log('hello')}>Some text</Text>
</TextInput>
The console.log('hello') will never fire. How can I keep the TextInput from blocking its children's onPress events?
And if not, does anyway else know of a way to make text selectable without using an input?
Note: I've only tested this on iOS -- I've seen some comments from people saying it works fine for Android
I am using React and Semantic UI for my website and I'm looking to create a modal popup to provide some action items on the page.
Currently, with Semantic's Modal, you must choose between three dimmer options (Default, inverted and blurring). In my case, I want the pop-up to appear, but I don't want ANY overlay. The page behind the model should appear as normal. Strangely, this isn't easy/obvious to implement.
On my page, I have the following example model code.
<Modal dimmer="inverted" size='mini' open={this.state.modalopen} onClose={this.onClose}>
<Modal.Header>Select a Photo</Modal.Header>
<Modal.Content image>
<Modal.Description>
<p>Some contents.</p>
</Modal.Description>
</Modal.Content>
</Modal>
The three options (default,inverted and blur) obviously don't work.
I have tried using styling to set the background color to transparent and other optoins, but nothing seems to work.
<Modal style={{backgroundColor: "transparent"}} dimmer="inverted" size='mini' open={this.state.modalopen} onClose={this.onClose}>
I know there must be an easy solution here..what is it?
Thx for your help.
Is used to be possible to set dimmer={false}, but this is deprecated (see link below) according to the documentation, and you will need to use styling in order to make it transparent, so your solution is close to what you need to do. If you inspect the rendered Modal, you'll see that you need to override the background-color of the .ui.dimmer css class. You should be able to do that in your component's stylesheet.
https://github.com/Semantic-Org/Semantic-UI-React/pull/2882
I'm working on fixing some responsive design issues with a sidebar component in React, and one problem with it is that the label text on the tabs gets wicked scrunched up on smaller screens. I want to hide this text but I can't seem to find a good way to do it.
I've tried replacing the label text with a div that is hidden via bootstrap on small/x-small screens, but that doesn't work
<Tab
icon={<Icon className="material-icons geometry">category</Icon>}
label={<div className=".hidden-xs .hidden-sm">GEOMETRY</div>}
value='a' />
Ideally this text should go away on smaller screens but it just acts as though I hadn't put anything there at all. In fact, any bootstrap classes I try to add to that div seem to have no effect. How might I go about fixing this?
If you are using Material UI, you can use Hidden tag to hide label based on mobile viewport. When you use tag 'Hidden' with prop xsDown, the label will be hidden at or below xs breakpoint.
<Tab
icon={<CategoryIcon ></CategoryIcon>}
label={<Hidden xsDown>GEOMETRY</Hidden>}>
</Tab>
https://codesandbox.io/s/wispy-bird-vftel?fontsize=14
Hi Everyone,
I am fetching a few buttons from an API and displaying them in a view according to their names. Each of them is displayed as
<TouchableHighlight style={styles.button} onPress={this.onBtnClick.bind(this, item.apiurl)} >
<Text style={styles.Text}{item.displayName}</Text>
</TouchableHighlight>
The button click is not working all over the button except for the last one. It only works on specific areas. I have modified UI is several ways for the first few and checked. It still remains the same.
Any suggestions/Improvements are appreciated.
It's because you're binding the onBtnClick function everytime you click your button.
Simple fix would be onPress={() => this.onBtnClick(item.apiurl)