DOCSEARCHbyAlgolia
Submit Docs

ReScript React Native

website·Indexed 29 days ago

https://rescript-react-native.github.io/

Documentation and bindings for using React Native with ReScript. Includes API references for core components such as Pressable, ScrollView, and PanResponder, as well as guides on the styling system using Style.s and layout style props.

Tokens
24K
Snippets
187
Records
223
Agent score
74%

What's inside ReScript React Native

  1. Overview of reason-react-native zero-cost bindings

    The reason-react-native package provides bindings for React Native that follow a 'zero-cost' approach. This means the generated JavaScript code typically interacts directly with React Native's JavaScript API without introducing unnecessary abstraction layers, resulting in reduced code size and improved performance compared to the legacy bs-react-native bindings.

  2. Overview of ReScript React Native

    ReScript React Native provides safe, statically typed bindings for React Native features, allowing developers to build mobile apps using ReScript and ReScript React. It compiles ReScript code into standard JavaScript that React Native consumes, ensuring there is no additional runtime or bundle cost (zero-cost bindings).

  3. Overview of ReScript React Native

    ReScript React Native provides bindings for the core React Native framework as well as popular community modules, including React Navigation and other widely used libraries. It focuses on providing zero-cost bindings that interact directly with React Native modules without indirection, reducing the risk of bugs. Additionally, it leverages the ReScript compiler to catch errors at compile-time, helping developers avoid common React 'red screen' runtime errors during development.

  4. Use VirtualizedList for custom list data accessors

    VirtualizedList is a low-level list primitive in rescript-react-native. It should generally be avoided in favor of FlatList or SectionList unless the application requires custom data accessors for rendering lists.

  5. Manage Android runtime permissions with PermissionsAndroid

    The PermissionsAndroid API is used to manage 'dangerous' permissions on Android M+ that require a user dialog. While some permissions are granted by default via AndroidManifest.xml, runtime permissions must be requested and handled via this API.

  6. Understand the gestureState type

    The gestureState type provides detailed information about the current state of the Gesture Responder System, including coordinates, velocity, and touch counts.
    type gestureState = {
  stateID: float,
  moveX: float,
  moveY: float,
  x0: float,
  y0: float,
  dx: float,
  dy: float,
  vx: float,
  vy: float,
  numberActiveTouches: int,
}

  7. Use VirtualizedSectionList for low-level section list control

    VirtualizedSectionList is the low-level primitive component that powers the higher-level SectionList. It is used when direct control over the virtualized list behavior or access to specific methods like scrollToLocation is required.

  8. Use the textLayoutEvent type

    The textLayoutEvent provides detailed information about the layout of text, including an array of lines containing rectangle dimensions and typography metrics.
    type payload = {
  lines: array<{
    ...Layout.rectangle,
    ascender: float,
    capHeight: float,
    descender: float,
    text: string,
    xHeight: float,
  }>,
}

  9. Understand the zero-cost approach in reason-react-native

    The reason-react-native bindings utilize a 'zero-cost' approach, meaning the JavaScript code produced by ReScript/BuckleScript typically calls React Native JavaScript code directly. This eliminates unnecessary abstraction layers, reducing the amount of additional JavaScript code produced, improving performance, and decreasing bundle size compared to the legacy bs-react-native bindings.

  10. Use the View component for layout in rescript-react-native

    The View component is the fundamental building block for UI layout. It supports layout and view style properties (via Style.s), accessibility props, gesture responder handlers, and W3C pointer events such as onPointerDown.
    open ReactNative
open Style

<View
  style={s({flex: 1., padding: 16.->dp, backgroundColor: "white"})}
  onPointerDown={_ => Console.log("pointer down")}>
  <Text> {"Hello"->React.string} </Text>
</View>

  11. Set up the ReScript development workflow

    To develop a ReScript React Native app using the CLI, you need three concurrent processes: one to compile ReScript, one to run the Metro Bundler, and one to launch the native simulator/emulator.
    # Terminal 1: Watch ReScript files
npm run res:watch

# Terminal 2: Start Metro Bundler
npm start

# Terminal 3: Launch the app
npm run ios
# OR
npm run android

  12. Schedule tasks to run after animations with InteractionManager

    Use InteractionManager to defer heavy work until all active animations and interactions have completed. This prevents frame drops and ensures a smooth user experience during transitions.
    InteractionManager.runAfterInteractions(() => {
  // Perform heavy work here
});