Welcome to Invoiss React-Native Technical Interview

This project is running with expo so setting it up is extremely simple

Make sure your environment is set up correctly according to the React Native Docs and Expo Docs before you attend the interview question

• Installation

Fork this repo, open the project and cd in the project folder and

npm/yarn install 

Also run expo install

expo install 

now run

expo start

• head over to localhost:19000 and click on run simulator

• By now you should have an iOS simulator running

You should be able to see this App Screen once your app is loaded on iOS Simulator.

Your Task : As part of your interview, attempt and complete all 3 as best as you can, if you were not able do one of the tasks, we encourage you to still submit a pull request

Task A: Global BottomSheetModal Provider

• Call the provider in the "Tab 1" Screen of the boilerplate App.

• Put the provider it self in the /providers/bottomSheetProvider.tsx file

• Providers are a good way to eliminate prop drilling and here we have an idea of a BottomSheet provider. It will allow us to call the BottomSheet without having to create refs in each file and instead call the provider and use the bottomSheet anywhere.

• Refer to this Bottom Sheet Modal Library

• Once you are done creating the provider an example way to use the provider would be like the following:

import React from 'react';
import { Button } from 'react-native';
import { useBottomSheet } from './providers/bottomSheetProvider.tsx';

export default function App() {
	const bottomSheet = useBottomSheet();

	return (
		<Button
			onPress={ () => bottomSheet( {
				render( modal ) {
					return <BottomSheetContent />;
				},
				snapPoints: [ '50%', '70%' ]
			} ) }>
			Show Modal
		</Button>
	)
}

Task B: Horizontal Scrolling Effect

• Create this feature below within the given boiler plate app.
  • Note: if the gif below doesn't load correctly, try this link for the full demo video : Demo Video

Create this feature in the "Tab 2" Screen of the boilerplate App.

• Your task is to a create a custom horizontally scrolling category section so that as the user scrolls down the page, then the categories on the top also scroll horizontally and shift over. Use FlatList. User should also be able to click on any of these categories and the page should scroll down to that section.

• You may use the Reanimated API V2.

Task C: Document Uploading

• Create this feature below within the given boiler plate app.
  • Note: if the gif below doesn't load correctly, try this link for the full demo video : Demo Video

Create this feature in the "Tab 3" Screen of the boilerplate App.

• Add a button that pops a modal which asks the user what kind of document they would like to upload, they can choose a picture, or video from their gallery, and upload it to the empty screen.

-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

• Please keep in mind that, we love to encourage our developers to seek google and the online dev community for answers and help. But these tasks above are what we expect from a developer to do on their own when hired with us for this react native role.

Once you are done, commit your changes, push it to your own forked repo, and create a pull request to this repo and we will take it from there!

Thanks for applying to Invoiss!