Getting the text content of a parent View in React Native? - javascript

I have something like this in React Native
<View>
<Text>Hello</Text>
<Text>World</Text>
</View>
which is created by mapping through text and wrapping each sentence or chunk of text in a View, and each word in a Text component.
Is there any way I can get all of the text content of the View component by pressing on any of the children? Like tapping "Hello" and getting "Hello World" loaded into state.

Related

React Native TV, Unwanted Focusing on Text element

For a react native tv application using react-native-template-typescript-tv / react-native-tvos
The first focus is on Text and on press down it is focusing on the TouchableHighlight
How do I prevent the focus on a Text element?
I tried adding the prop focusable={false} and fiddled with the hasTVPreferredFocus
<View>
<Text>Title</Text>
<TouchableHighlight>Click Me</TouchableHighlight>
</View>

Is it possible to edit text component that is present inside a <ResizableRect /> component 'react-resizable-rotatable-draggable' on dragging?

I am using 'react-resizable-rotatable-draggable' library and using the ResizableRect component, I am dragging that text component and couldn't edit anything in that text component. Is it possible to edit a text component using this?
I tried using the 'react-resizable-rotatable-draggable' library but I couldn't edit the text component. It is uneditable while using component.
I edited on this link, https://codesandbox.io/s/5zk612nvk4?file=/src/index.js
In the above link in index.js line number 11,
Instead of that line, I replaced it as textarea tag
But it is not editable.

Ternary operator works wrong in ReactJS

I have a problem when rendering components based on conditional in reactJS.
My expectation is the paragraph will be shown all of the content if it is in pdf view. Meanwhile, it will be displayed a part of the content with the "Show more" button if it is on the edit page.
Both pages use ComponentA to render the paragraph.
I have an isPdf prop which was passed from the parent to check pdf file:
const ComponentA = ({isPdf}) => {...}
Render component:
{!isPdf ? <RsReadMore width={1000}>{actualContent}</RsReadMore> : <RsFullContent>{actualContent}</RsFullContent>}
When I print isPdf on the console to test. It displays true on pdf page and false on edit page (Correct).
However, it still shows a part of the content with the "Show more" button on both two pages.
Which are some reasons that make this happen and how to solve it?

How to prevent a screen reader from reading/focusing on content inside a component in React Native?

From what I've read in React Native's accessibility documentation, adding accessible={true} to the parent component would make it a group and the screen reader wouldn't be able to navigate to its children. I tried the following:
<PickerButton
accessibilityRole="button"
accessibilityLabel={dateTimePickerLabel}
accessibilityHint={tTemplates('rating_date.title')}
accessible={true}
>
<Row>
<LabelText>{dateTimePickerLabel}</LabelText>
<StyledDownArrow />
</Row>
</PickerButton>
But when I start swiping, the screen reader goes through PickerButton first, reads its accessibilityLabel, and then moves to the LabelText and reads the text inside dateTimePickerLabel, so the same text gets read twice. Also accessible={true} doesn't make the PickerButton a group

Rendering lists react native

I'm using react native and have parent component with modal. When modal opens, my child component with list rerenders one time, but interface freezing for ~1 or 2 seconds depends on elements in the list. Average size of list is 50 elements. What can be a problem?
<View style={styles.screenWrapper}>
<View style={styles.container}>
<List
onChoose={onChoose}
flightOffers={paginatedFlightOffers}
isRequesting={isLoadingOffers}
isLoadingMore={isLoadMore}
isLoadingResults={!paginatedFlightOffers.length}
currency={{ value: searchId?.searchId.currencyRates[body.currency], name: body.currency }}
showMoreFlightOffers={showMoreFlightOffers}
/>
</View>
<NativeModal
visible={isDetails}
onClose={onDetailsClose}
animationType="fade"
>
<View>
<Text>asdf</Text>
</View>
</NativeModal>
</View>
Insinde the List component there is FlatList and sometimes it writes attention message with advice that I used. Maybe it is possible to avoid rerendering because props in List component remains the same. I have tried to use React.memo, but still rerendering exists

You should try using flat list as it virtualize list it renders only small batches of elements and more efficient

Got answer to this question from my friend and fixed rerendering. The reason List was rerendering everytime when modal was opened is that isDetails state was changing in the parent component. So everytime state changed my parent component was also fully rerendered.
To fix it I created isDetail state in recoil(you can to it throw redux, mobx, context etc.), created new component with modal and in this new component called isDetail from recoil.

Categories