Horizontal auto scroll on long text react native

user_14506569 0
Viewed 2724

I have some titles that are very long, so I'm using numberOfLines like this:

<View style={{flex: 1}}>
      <Text
        style={{
          fontFamily: boldFont,
          fontSize: 15,
          color: theme.primaryTextColor,
          maxWidth: 290,
        }}
        numberOfLines={1} ellipsizeMode="tail">
        {props.item.name}
      </Text>
    </View>

But I want my text to automatically starts "playing" or scrolling so the user could see the full title. What is the best way to do this?

react-native
3 Answers

You can use this package for this job: https://www.npmjs.com/package/react-native-text-ticker If your text does not fit on 1 line, it will start to scroll. If it fits, it stays fixed. You can access the details of the package from the link.

For Example:

import TextTicker from 'react-native-text-ticker'

<TextTicker scrollSpeed={50} loop bounce numberOfLines={1}>
   Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
   Hello Hello Hello Hello Hello
</TextTicker>
user_107833700

You can wrap your Text component with ScrollView and can make it animated autoscroll. I found a blog post.

user_94671130

You can wrap your text component in ScrollView like this

<ScrollView horizontal>
<Text>Some Big Text</Text>
</ScrollView>
user_101937350
Related