DOCSEARCHbyAlgolia
Submit Docs

react-native-text-ticker

repository·master·Indexed 19 days ago

https://github.com/deanhet/react-native-text-ticker

A React Native component that provides marquee-like text scrolling effects. It supports infinite looping, bouncing for slightly oversized text, and manual user scrolling. The library includes the TextTicker and TextMarquee components, allowing for automatic or explicit animation types (auto, scroll, bounce) with customizable speeds, durations, and easing.

Tokens
3.3K
Snippets
9
Records
16
Agent score
66%

What's inside react-native-text-ticker

  2. Run available scripts for the example project

    master

    The example project uses standard NPM/Yarn scripts to manage development and testing. Use these commands to start the app, run tests, or launch on specific platforms.

    Development

    • npm start: Runs the app in development mode. You can view it in the Expo app on your phone. To clear the packager cache, use npm start -- --reset-cache.
    • npm run ios: Starts the app and attempts to open it in the iOS Simulator (macOS required).
    • npm run android: Starts the app and attempts to open it on a connected Android device or emulator.

    Testing

    • npm test: Runs the Jest test runner.

    Build Management

    • npm run eject: Starts the permanent process of ejecting from Create React Native App to use native build tools (Xcode/Android Studio) directly.
    npm start
npm test
npm run ios
npm run android
npm run eject

  3. Basic usage of TextTicker

    master

    The TextTicker component can be used as a drop-in replacement for the standard React Native Text component. It supports a single child text string; using any other children may cause unexpected behavior.

    import React, { PureComponent } from 'react'
import { StyleSheet, View } from 'react-native'
import TextTicker from 'react-native-text-ticker'

export default class Example extends PureComponent {
  render(){
    return(
      <View style={styles.container}>
        <TextTicker
          style={{ fontSize: 24 }}
          duration={3000}
          loop
          bounce
          repeatSpacer={50}
          marqueeDelay={1000}
        >
          Super long piece of text is long. The quick brown fox jumps over the lazy dog.
        </TextTicker>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
    import React, { PureComponent } from 'react'
import { StyleSheet, View } from 'react-native'
import TextTicker from 'react-native-text-ticker'

export default class Example extends PureComponent {
  render(){
    return(
      <View style={styles.container}>
        <TextTicker
          style={{ fontSize: 24 }}
          duration={3000}
          loop
          bounce
          repeatSpacer={50}
          marqueeDelay={1000}
        >
          Super long piece of text is long. The quick brown fox jumps over the lazy dog.
        </TextTicker>
      </View>
    )
  }
}

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

  5. Configure the Packager IP Address

    master

    If you are running your project in a virtual machine or need to override the automatically detected IP address, use the REACT_NATIVE_PACKAGER_HOSTNAME environment variable.

    Mac and Linux:

    REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname' npm start

    Windows:

    set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname'
npm start

  6. Customize app display name and icon

    master

    You can configure basic app metadata in app.json under the expo key.

    • Display Name: Set the expo.name key to your desired string.
    • App Icon: Set the expo.icon key to a local path or a URL. It is recommended to use a 512x512 PNG file with transparency.
    {
  "expo": {
    "name": "Your App Name",
    "icon": "./path/to/icon.png"
  }
}

  7. How TextMarquee animation logic works

    master

    TextMarquee uses a combination of Animated and ScrollView to manage text movement.

    1. Metric Calculation: On mount (or when content changes), the component measures the width of both the container and the text content.
    2. Decision Logic:
      • If textWidth <= containerWidth, no animation occurs (content fits).
      • If the text is only slightly longer than the container (specifically if distance < containerWidth / 8), it may trigger a bounce animation if bounce is enabled.
      • Otherwise, it performs a scroll animation.
    3. Looping: If loop is set to true, the component resets the animatedValue to 0 and restarts the animation sequence once a cycle completes.
    4. Interaction: The component wraps the text in a ScrollView to allow users to manually scroll through the text if scroll is enabled.

  8. Troubleshoot iOS Simulator errors

    master

    If npm run ios fails with errors like "non-zero exit code: 107" or claims Xcode is not installed, follow these steps:

    1. Accept Xcode License: Ensure Xcode is installed and open it to accept any pending license agreements.
    2. Configure Command Line Tools: In Xcode, go to Preferences > Locations and ensure the Command Line Tools dropdown is set to a valid version. This is a common issue when installing via Homebrew.
    3. Reset Simulator: If the issue persists, open the Simulator app, select Reset Contents and Settings... from the app menu, then restart the simulator and re-run the command.

  9. Troubleshoot Networking issues

    master

    If you encounter network timeouts or refused connections when loading the app on a physical device, ensure your phone and computer are on the same network. The packager requires access to ports 19000 and 19001. Verify your firewall settings allow these ports.

    To test connectivity, replace the exp:// prefix of the URL printed in your terminal with http:// and attempt to load it in your phone's web browser (e.g., http://192.168.0.1:19000).

    If the http URL is unreachable, try using your phone's mobile hotspot to create a network for your computer and restart the packager.

    Example URL transformation:
exp://192.168.0.1:19000  ->  http://192.168.0.1:19000

  10. Troubleshoot QR Code scanning issues

    master

    If the QR code is not scanning:

    • Ensure your camera is focusing correctly.
    • Check terminal color contrast. Some IDE terminal themes (like WebStorm) may lack sufficient contrast for the Expo app's scanner.
    • Workaround: Manually enter the URL printed by the packager script into the search bar of the Expo app.

  12. TextTicker Properties Reference

    master

    The following props are available for the TextTicker component:

    PropTypeOptionalDefaultDescription
    styleStyleObjtrue-Text Style
    durationnumbertrue150ms * length of stringNumber of milliseconds until animation finishes
    bounceSpeednumbertrue50Describes how fast the bounce animation moves. Effective when duration is not set.
    scrollSpeednumbertrue150Describes how fast the scroll animation moves. Effective when duration is not set.
    animationTypestringtrue'auto'one of the values from 'auto', 'scroll', 'bounce'
    loopbooleantruetrueInfinitely scroll the text, effective when animationType is 'auto'
    bouncebooleantruetrueIf text is only slightly longer than its container then bounce back/forwards instead of full scroll, effective when animationType is 'auto'
    scrollbooleantruetrueGives the ability to grab the text and scroll for the user to read themselves. Will start scrolling again after marqueeDelay or 3000ms
    marqueeOnMountbooleantruetrueWill start scroll as soon as component has mounted. Disable if using methods instead.
    marqueeDelaynumbertrue0Number of milliseconds to wait before starting marquee
    onMarqueeCompletefunctiontrue-This function will run after the text has completely passed across the screen. Will run repeatedly if loop is enabled.
    onScrollStartfunctiontrue-This function will run if the text is long enough to trigger the scroll.
    isInteractionbooleantruetrueWhether or not animations create an interaction handle on the InteractionManager. Disable if you are having issues with VirtualizedLists not rendering properly.
    useNativeDriverbooleantruetrueUse native animation driver, should remain true for large majority of use-cases
    repeatSpacernumbertrue50The space between the end of your text string ticker and the beginning of it starting again.
    bouncePadding{ left: number, right: number }true-The padding on start/end positions of bounce.
    bounceDelaynumbertrue0How long the animation should wait after each bounce before starting again.
    easingfunctiontrueEasing.easeHow the text scrolling animates. Additional options available from the Easing module
    shouldAnimateTresholdnumbertrue0If you have a view drawn over the text at the right (a fade-out gradient for instance) this should be set to the width of the overlaying view
    disabledbooleantruefalseDisables text animation
    isRTLbooleantruefalseIf text is right to left (By default, it uses I18nManager.isRTL to check)