react-navigation/search-layout

A basic search screen layout for usage with React Navigation.

React Navigation 7

Routing and navigation for your React Native apps.

Documentation can be found at reactnavigation.org.

This branch contains the code for the pre-release version of React Navigation 7. You can find the code for the latest stable version in the 6.x branch.

Package Versions

Name	Latest Version
@react-navigation/bottom-tabs
@react-navigation/core
@react-navigation/devtools
@react-navigation/drawer
@react-navigation/elements
@react-navigation/material-top-tabs
@react-navigation/native-stack
@react-navigation/native
@react-navigation/routers
@react-navigation/stack
react-native-tab-view

Contributing

Please read through our contribution guide to get started!

Installing from a fork on GitHub

Since we use a monorepo, it's not possible to install a package from the repository URL. If you need to install a forked version from Git, you can use gitpkg.

First install gitpkg:

yarn global add gitpkg

Then follow these steps to publish and install a forked package:

1. Fork this repo to your account and clone the forked repo to your local machine
2. Open a Terminal and cd to the location of the cloned repo
3. Run yarn to install any dependencies
4. If you want to make any changes, make them and commit
5. Run yarn lerna run prepack to perform the build steps
6. Now cd to the package directory that you want to use (e.g. cd packages/stack for @react-navigation/stack)
7. Run gitpkg publish to publish the package to your repo

After publishing, you should see something like this:

Package uploaded to [email protected]:<user>/<repo>.git with the name <name>

You can now install the dependency in your project:

yarn add <user>/<repo>.git#<name>

Remember to replace <user>, <repo> and <name> with right values.

search-layout's Issues

Update example showcasing usage

Current example uses old version of package. Write a new working one. Keep it simple.

Write some documentation

It's pretty minimal right now

Provide a gif to the readme

It is possible to ad a gif to show the behaviour?

Thank you

An error occured

Hey , thnx for the library

after following the readme and running the app with search layout am getting this

/Users/path../node_modules/react-navigation-addon-search-layout/index.js 1:20
Module parse failed: Unexpected token (1:20)
You may need an appropriate loader to handle this file type.
> export default from "./src/SearchLayout";

this error won't stop the app from running or functioning probably on mobile (though i get the error on the logs),
but it will stop it if i run the app with
expo start --web

Regards,

Use bob for build

Update for react-navigation@5

Package has no peerDependencies defined.

I've added the search-layout add on into a bare Expo project and I have to be installing its dependencies manually.

Shouldn't the package come with the packages that it depends on already set? or these dependencies (i.e: react-native-safe-area-view) are expected to be already set it up by the dev when using react-navigation.

Best 🚀

Rewrite in TypeScript

Add support for web

Cancel Button Doesn't Work on Ios

My react native app version is 0.59.10. The cancel button doesn't work on click.

Failed to jump properly

In Search Modal, using this.props.navigation.navigate("HomeTwo") to jump to the specified page will automatically return to Main, you can add multiple screens in Main in your case and try to jump

as:

const MainStack = StackNavigator(
  {
    Home: {
      screen: Home
    },
HomeTwo: {
      screen: HomeTwo
    },
  },
  ...
);

const Navigation = StackNavigator(
  {
    Main: {
      screen: MainStack,
    },
    Search: {
      screen: SearchLayout
    },
  },
 ... 
}