Home > Back-end >  How to scroll to the beginning of a text in TextInput Expo (React Native)
How to scroll to the beginning of a text in TextInput Expo (React Native)

Time:07-07

I'm trying to make something similar to a creator's comment under a post on Instagram. If the text is longer, only the first line will be visible. You can read the rest by clicking the three dots or read more. In this case, I am using TextInput and enabling and disabling multiline on press. While everything works fine, there is a strange issue where on Android devices you will see the last part of the text rather than the first when you enable multiline and then disable it. Everything works as expected on iOS devices. What can I do to solve this problem? My first thought was to scroll to the beginning of the text, but I do not know how and I need help with that. Please feel free to suggest other ways to solve this problem. Here is an example that I made so you can see what my problem is. Run it on IOS emulator and you'll see how it's supposed to run, then on an Android emulator and you'll see what the problem is.

import React, {useState} from 'react';
import { TextInput, TouchableOpacity, StyleSheet, View } from 'react-native';

let text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s";

export default function App() {
  const [extend, setExtend] = useState(false);
  return (
    <View style={styles.container}>
    <TouchableOpacity style={{width:"50%", height:"50%", backgroundColor:"#9fa"}}
      onPress={()=>{setExtend(!extend)}}
    >
      <TextInput
        value={text}
        multiline={extend}
        editable={false}
        color={"#000"}
        allowFontScaling={false}
      />
    </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems:'center'
  },
});

CodePudding user response:

Try add this: selection={{ start: 0 }}

<TextInput
        value={text}
        multiline={extend}
        editable={false}
        color={"#000"}
        allowFontScaling={false}
        selection={{ start: 0 }} // <- Add this
      />

  • Related