For example i have a TextInput like this
<ScrollView style={{flex: 1}}>
<TextInput
placeholder="Input"
style={{fontSize: 50}}
value={'Sample text'}
/>
</ScrollView>
So normally, when we click on the TextInput, it will automatic show caret at the end of text ( on android ), no matter where we click, at the first time, it will have the caret at the end, like this
BUT HOW can we set the caret in where we click, for example when we click the "m" letter, it will have caret after the "m", like this
Problem is, as i said, on android we always have the the caret at the end first, then if we click other, the caret will more to that, like this
I mean, it not a problem when text is short, but imagine, the text will like this
And we want to edit some text that already exist, so it scroll all the way down to the bottom (because the bottom contain the lastest text)
So my question is
HOW CAN WE SET THE CARET ON WHERE WE TOUCH (OR CLICK), NOT FROM LASTEST WORD IN TEXTINPUT?
You need to request focus to this TextInput.
<TextInput
placeholder="Input"
autofocus={true}
style={{fontSize: 50}}
value={'Sample text'}
/>
Or if it will not be working, write this please
https://github.com/react-native-modal/react-native-modal/issues/516
Related
I have a clickable text component with Material UI Typography:
<MDBox mt={2} mb={1}>
<MDTypography variant="body2" style={{color: 'white', cursor:"pointer"}}
onClick={()=>dispatch({type: "goBackToPage1"})}
>
Go back to previous page
</MDTypography>
</MDBox>
As you can see, the Typography takes up the entire row area, such that even if I put the mouse on the green area (on the same row but outside the text area), the mouse still turns into a pointer and you can still click it.
How do I restrict clicking to be strictly on the text, instead the whole row area?
You can try to pass "component" prop to MUI Typography and and set it as span
<Typography component="span">
...
</Typography>
I am trying to render an element that is positioned absolutely behind a flatlist and it will be revealed once the user scrolls to the bottom. The issue I am facing is that the element needs to be interactable, and the flatlist root element takes all pointerevents instead of the background element.
const FlatlistOverElement: FC = () => (
<View style={{ flex: 1, width: '100%' }}>
<FlatList
data={data}
style={{ flexGrow: 1 }}
ListFooterComponent={() => (
<View style={{ height: BACKGROUND_ELEMENT_HEIGHT, opacity: 0 }} />
)}
renderItem={RenderItem}
/>
<AbsolutelyPositionedElementBehindFlatList />
</View>
)
I have tried to remove pointerevents from the flatlist, then the flatlist is not scrollable.
I have tried to set the height of the flatlist smaller, and let the content overflow. This allows the user to interact with the element, but for that part of the screen, the user can not scroll the flatlist.
What other approach can I utilise in order to solve this issue ?
You can use zIndex property on the scroll completion. Just provide a higher zIndex value than that of FlatList to absolute component whenever the scroll is completed.
zIndex Layout Props
Thanks for the suggestions. I ended up using a zIndex to put the interactable content in front of the flatlist when having scrolled to the end, as well as adding snap points on both sides of the element. To prevent the user from half revealing the element and not be able to interact with it.
I have a basic text input with multiline set to true. Additionally it has selection and onSelectionChange props set which causes cursor to move to initial position whenever there is change in onChangeText.
Here it's the video : https://streamable.com/bchsz4
Here it's the repro : https://github.com/VivekNeel/IOS_SELECTION_CHANGE
Here it's the sample code :
<TextInput
onChangeText={handleChange}
value={value}
multiline
selection={selection}
onSelectionChange={handleSelection}
placeholder="Enter a text"
style={{marginTop: 100, marginHorizontal: 16}}
/>
Just not using selection props fixes this!
I want to break the line of text in TextInput when reaches to end of TextInput.
I don't want to increase the height of TextInput. It will be scrollable inside TextInput.
I did try FlexWrap but it didn't work for me.
Thanks!!!
use multiline={true}:
<TextInput
multiline={true}
numberOfLines={4}
style={{ height:200, textAlignVertical: 'top',}}
...
/>
I am looking to build a button/view that animates when a user taps and holds on it. This animation will just be a progressive change of color from white to a green color. I have found a tutorial that does exactly this:
http://browniefed.com/blog/react-native-press-and-hold-button-actions/
In the render function, the author uses:
<View style={styles.container} onLayout={this.onPageLayout}>
<TouchableWithoutFeedback
onPressIn={this.handlePressIn}
onPressOut={this.handlePressOut}
>
<View style={styles.button} onLayout={this.onPageLayout2}>
<Animated.View style={[styles.bgFill, this.getProgressStyles()]} />
<Text style={styles.text}>Press And Hold Me</Text>
</View>
</TouchableWithoutFeedback>
<View>
<Text>{this.state.textComplete}</Text>
</View>
</View>
Please note there are two onLayout mentions...one in the parent View and the other in the View about halfway down
The way this works is the onLayout call is supposed to get the size of the TouchableWithoutFeedback button so that I can set the animation to have the correct sizing. However, the second onLayout call just does not get called no matter what I try. The very top View's onLayout is being called so I know that my code is good (as this.onPageLayout and this.onPageLayout2 are exact copies except their console.logs vary slightly).
If I remove all the surrounding code and only have the inner View in this render function, then the onLayout={this.onPageLayout2} works like a charm, but as soon as I put the rest of the parent back in, it no longer works.
Does anybody know how I can get a child View to have their onLayout method work? Or another way or getting the size of the TouchableWithoutFeedback button for my purposes of animation?
Thanks!
You are using TouchableWithoutFeedback and so you don't get any feedback from it's child. Change it to other buttons for example: TouchableOpacity, Then you can have onLayout for both components.