1.0.5 • Published 3 years ago

@space-uy/react-native-template-spacedev v1.0.5

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

SpaceDev React Native Template

Node.js Package

Getting started

Seeing this in the repo? Want to use this? Run this command!

npx react-native init <app-name> --template @space-uy/react-native-template-spacedev

After initializing a new project with the template there are just a few configuration files you need to update.

AppCenter SDK for crash reports

Do a full project find-and-replace for the text appcenter-app-secret and replace it for your app secret on app center. After you do this there is a bunch of commented code in src/app/navigation/index.js you may want to uncomment.

What this includes

We tried to include all the libraries we use in all our projects and some more to improve performance, developer experience and user experience.

Here are the libraries and extras we included:

How do I structure my project?

Just follow the examples in all the features. CONTRIBUTING.md has a more detailed explanation.

If you have reusable components you need put them in the components folder.

If you have a new feature, be it a redux slice for something alone or maybe it has a screen that you'll later navigate to, put it in the features folder. See how the counter feature is mapped to a folder called the same way with the component inside it and its redux slice and api helpers?

When you have strings you need to show in your UI they go in localization/en.js because if you later want to translate the app you'll be ready to do that without any major hassle. An example of how to access those strings can be found in the counter/Counter.js component.

When you begin, update your theme to match your app. To access that theme read the next section about useStyles.

In the app folder there are shared files only, there is the redux store configuration, the apisauce client configuration and global services like the fileUpload function.

Lastly, for when you need a new screen to be handled by a navigator look for that navigator under navigation. If it ain't there create it.

How do I use the useStyles hook?

const MyComponent = () => {
  const styles = useStyles(makeStyles);
};

const makeStyles = createStyleFactory((theme, safeAreaInsets) =>
  StyleSheet.create({
    // styles
  }),
);

That's it, all you need to know is your StyleSheets you'll build through factory functions that receive two parameters: the theme as it is returned by useTheme from @react-navigation/native and the safeAreaInsets.

Usually, you can just get the colors property off of the theme since it is what you'll use the most.

The shape of safeAreaInsets is:

Property nameDescription
topuseful to avoid the notch
leftif your app supports landscape orientation use this to avoid the notch
bottomuseful to avoid the bottom bar on iOS
rightif your app supports landscape orientation use this to avoid the bottom bar

Making API requests

Follow these steps:

  1. Update the API_URL variable in the .env file
  2. Use the makeApiCall higher order function in your api files like the following snippet
import makeApiCall from '_app/makeApiCall';

// the following does a post request to your server to the
// baseUrl + 'something' with the data variable as its body
const fetchSomethingFromTheApi = makeApiCall((client, data) => client.post('something', data));

How do I upload files?

The useImageUpload hook or the others you can find to upload other types of files in our knowledge base work like so:

const [progress, handleUpload] = useImageUpload(onValueChange);

Think of that onValueChange function it receives as what would be (value) => setFieldValue('coverUrl', value) in formik.

Since we recommend you use formik but we can't use hooks inside the formik context we recommend you make a separate component to call this hook and get that function as a prop.

Other than that, all you need to do is to have you api client properly setup and the POST /storage endpoint configured like it is in our other knowledge base article.

For a full example, there is a feature called file-upload for you to look at in this template!

Credit where credit's due

This template is based off of react-native-new-template and the official react-native-template-typescript.

If you want to make your own template those are your example to follow.

:computer: Contributing

Contributions are very welcome. Please check out the contributing document.

:bookmark: License

This project is MIT licensed.