Skip to main content

​
Create a component

Add a new .jsx file in rn/src/components/. Each component must use a default export and receives props from URL query parameters. Here’s the included Hello.jsx as a reference: 
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'

export default function Hello({ message = 'Choicely' }) {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello from {message}!</Text>
    </View>
  )
}

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

​
Register the component

Open rn/src/index.js and add your component to the componentMapping object: 
export const componentMapping = {
  hello: () => require('./components/Hello'),
  counter: () => require('./components/Counter'),
  tic_tac_toe: () => require('./components/TicTacToe'),
  // Add your component here:
  my_component: () => require('./components/MyComponent'),
}
The key (e.g. my_component) becomes the name used in the URL scheme.
Each component must have a default export. The framework will show an error screen if the default export is missing.

​
Passing props via URL

Query parameters in the URL are automatically passed as props to your component: 
choicely://special/rn/hello?message=Alice
This renders the hello component with { message: "Alice" } as props. Multiple parameters work the same way: 
choicely://special/rn/counter?start=10
All query parameter values are passed as strings. Convert them to the appropriate type in your component if needed (e.g. Number(props.start)).

​
Root options

You can export a rootOptions object from your component module to control how the framework wraps it: 
export const rootOptions = {
  disableScrollView: true,
}

export default function MyComponent() {
  // This component manages its own scrolling
}
OptionTypeDescription
disableScrollViewbooleanSet to true if your component manages its own scroll behavior (e.g. uses FlatList or ScrollView internally).

​
Configure in Choicely Studio

To make your component accessible in the app:
  1. Open your app in Choicely Studio.
  2. Navigate to the screen where you want to add the component.
  3. Set the navigation item URL to:
choicely://special/rn/<name>
Replace <name> with the key from componentMapping (e.g. hello, counter, my_component). Your React Native components can navigate to other Choicely content using Linking.openURL(). See the iOS React Native Support page for the full URL scheme reference and examples.

​
Included examples

The project ships with these example components:
NameFileDescription
helloHello.jsxSimple greeting that accepts a message prop
counterCounter.jsxTap counter with persistent storage (MMKV) and a start prop
tic_tac_toeTicTacToe.jsxTwo-player Tic Tac Toe game