How to use @react-navigation/native - 10 common examples

export const useReadEffect = (publicKey, timeout) => {
	// timeout is the duration (in ms) that the user must stay on the page to set messages as read
	const navigation = useNavigation()

	const ctx = useMsgrContext()

	const fake = useConversation(publicKey)?.fake || false

	useEffect(() => {
		if (fake) {
			return
		}
		let timeoutID = null
		const handleStart = () => {
			if (timeoutID === null) {
				timeoutID = setTimeout(() => {
					timeoutID = null
					ctx.client.conversationOpen({ groupPk: publicKey }).catch((err) => {
						console.warn('failed to open conversation,', err)

const translateY = getTranslateY(animatedDiffClampY, headerHeight)

    return (
      
    )
  }
}

const CollapsibleHeaderBackView = withOrientation(_CollapsibleHeaderBackView);

const collapsibleNavigationOptions = (configOptions, userOptions, navigation) => {
  userOptions = {
    ...configOptions,
    ...userOptions,
    headerStyle:{
      ...configOptions.headerStyle,
      ...userOptions.headerStyle
    }
  };

  const navigationParams = navigation.state.params;

  if(!navigationParams || !navigationParams.animatedYSum ){
    // console.log('navigationParams is null');
    return userOptions;

export const useReadEffect = (publicKey: Maybe, timeout: Maybe) => {
	// timeout is the duration (in ms) that the user must stay on the page to set messages as read
	const navigation = useNavigation()

	const ctx = useMsgrContext()

	const conv = useConversation(publicKey)
	const fake = (conv && (conv as any).fake) || false

	useEffect(() => {
		if (fake) {
			return
		}
		let timeoutID: ReturnType | null = null
		const handleStart = () => {
			if (timeoutID === null) {
				let t = timeout
				if (typeof t !== 'number') {
					t = 1000

export const Home: React.FC = () => {
	const account = useAccount()
	const [{ flex, background, row, margin }] = useStyles()
	const navigation = useNativeNavigation()

	return (
		<>

);

const EXAMPLES = {
  Fade,
  Modal,
  Gesture,
  CardStack,
  SharedEl,
};

const AppNavigator = createSwitchNavigator({
  Examples,
  ...EXAMPLES,
});

const StatefulAppNavigator = createAppContainer(AppNavigator);

// const StatefulAppNavigator = createAppContainer(Fade);
// const StatefulAppNavigator = createAppContainer(Modal);
// const StatefulAppNavigator = createAppContainer(Gesture);
// const StatefulAppNavigator = createAppContainer(CardStack);
// const StatefulAppNavigator = createAppContainer(SharedEl);

const App = () => (
  
    
  
);

Expo.registerRootComponent(App);

style={{backgroundColor: Styles.globalColors.white}}
  >
    
  
)

const RootStackNavigator = createSwitchNavigator(
  {
    loading: {screen: SimpleLoading},
    loggedIn: LoggedInStackNavigator,
    loggedOut: LoggedOutStackNavigator,
  },
  {initialRouteName: 'loading'}
)

const AppContainer = createAppContainer(RootStackNavigator)

class RNApp extends React.PureComponent {
  private nav: any = null

  // TODO remove this eventually, just so we can handle the old style actions
  dispatchOldAction = (old: any) => {
    const nav = this.nav
    if (!nav) {
      throw new Error('Missing nav?')
    }

    const actions = Shared.oldActionToNewActions(old, nav._navigation) || []
    try {
      actions.forEach(a => nav.dispatch(a))
    } catch (e) {
      logger.error('Nav error', e)

style={{backgroundColor: Styles.globalColors.white}}
  >
    
  
)

const RootStackNavigator = createSwitchNavigator(
  {
    loading: {screen: SimpleLoading},
    loggedIn: LoggedInStackNavigator,
    loggedOut: LoggedOutStackNavigator,
  },
  {initialRouteName: 'loading'}
)

const AppContainer = createAppContainer(RootStackNavigator)

class RNApp extends React.PureComponent {
  private nav: any = null

  // TODO remove this eventually, just so we can handle the old style actions
  dispatchOldAction = (old: any) => {
    const nav = this.nav
    if (!nav) {
      throw new Error('Missing nav?')
    }

    const actions = Shared.oldActionToNewActions(old, nav._navigation) || []
    try {
      actions.forEach(a => nav.dispatch(a))
    } catch (e) {
      logger.error('Nav error', e)

export default function Albums() {
  const ref = React.useRef(null);

  useScrollToTop(ref);

  return (
    
      {COVERS.map((source, i) => (
        // eslint-disable-next-line react/no-array-index-key
        <img style="{styles.cover}">
      ))}
      {COVERS.map((source, i) =&gt; (
        // eslint-disable-next-line react/no-array-index-key
        <img style="{styles.cover}">
      ))}

export default function Chat() {
  const ref = React.useRef(null);

  useScrollToTop(ref);

  const { colors } = useTheme();

  return (

export default function App() {
  const containerRef = React.useRef();

  // To test deep linking on, run the following in the Terminal:
  // Android: adb shell am start -a android.intent.action.VIEW -d "exp://127.0.0.1:19000/--/simple-stack"
  // iOS: xcrun simctl openurl booted exp://127.0.0.1:19000/--/simple-stack
  // The first segment of the link is the the scheme + host (returned by `Linking.makeUrl`)
  const { getInitialState } = useLinking(containerRef, {
    prefixes: LinkingPrefixes,
    config: {
      Root: Object.keys(SCREENS).reduce<{ [key: string]: string }>(
        (acc, name) => {
          // Convert screen names such as SimpleStack to kebab case (simple-stack)
          acc[name] = name
            .replace(/([A-Z]+)/g, '-$1')
            .replace(/^-/, '')
            .toLowerCase();

          return acc;
        },
        {}
      ),
    },
  });