It's Challenge Time!

Now that you've covered various topics and become familiar with React Native syntax and components, it's time to put your skills to the test with a challenge. You're encouraged to complete this challenge from scratch, starting with initializing a new React Native app and finishing with implementing its complete functionality.

You will be provided with:

• Task: The specific goal of the challenge;
• Steps: Detailed instructions on how to complete the challenge;
• Possible Solution: Since you are asked to tackle this challenge from scratch yourself, you can use this link to find a repository with a possible solution to the challenge. However, keep in mind that this is not the only possible way to solve the problem.

Are you ready to take on the challenge and showcase your React Native skills? Let's get started!

Task

Your task is to create a simple React Native application that includes the following components:

1. Switch Component for Dark/Light Mode Toggling: Implement a switch component that toggles between dark and light modes. The entire app's background should change accordingly when the switch is toggled;
2. TextInput Component for Specifying Duration: Include a TextInput component where the user can input a number representing the duration (in seconds) for which an Activity Indicator should be shown;
3. Activity Indicator: Display an Activity Indicator component for the specified duration that the user entered.

Steps

Step 1: Setting Up the React Native App

1. Create a new React Native app using the npx create-expo-app ./ command in the newly created folder;
2. To see the initial appearance of your app, run the following command in the terminal: npm start.

Step 2: Cleaning Up

Remove the default content of the App.js file and all unnecessary files.

Step 3: Implementing Dark/Light Mode Toggle

1. Inside App.js, import the necessary components from React Native;
2. Create a functional component named App;
3. Use the useState hook to manage the state of the dark mode (darkMode) and its toggling function (toggleDarkMode);
4. Implement a Switch component to allow users to toggle between dark and light modes;
5. Define styles using StyleSheet.create() to differentiate between the dark and light modes.

Step 4: Adding TextInput for Duration Input

1. Import the TextInput component from React Native;
2. Within the App component, create state variables to manage the duration input (duration) and its updating function;
3. Integrate a TextInput component where users can input the desired duration (in seconds) for the Activity Indicator.

Step 5: Incorporating the Activity Indicator

1. Import the ActivityIndicator component from React Native;
2. Create state variables for managing the loading state (isLoading) and its updating function;
3. Implement a function (handleShowActivityIndicator) that triggers the display of the Activity Indicator for the specified duration;
4. Integrate a TouchableOpacity component that, when pressed, executes the handleShowActivityIndicator function;
5. Conditionally render the Activity Indicator based on the isLoading state.

Step 6: Testing the Application

1. Verify that the dark/light mode toggle functions correctly;
2. Test the TextInput component to ensure it accepts numeric input for the duration;
3. Check that the Activity Indicator appears and disappears after the specified duration when triggered.

Step 7: Optional Enhancements

1. Consider adding styling to improve the visual appearance of the components;
2. Explore incorporating smooth transitions between dark and light modes for a better user experience.

Visual Representation of Possible Solution