Post

First RNAPP

Posted
By
6 min read
First RNAPP

React Native Simple App Setup – Step-by-Step

1. Initialize a New React Native Project

1

npx @react-native-community/cli init SimpleApp
  • This creates a new folder SimpleApp with all the necessary files.

2. Simplify the App

  • Edited App.tsx to display a centered “Hello, React Native!” message:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

function App(): React.JSX.Element {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
});

export default App;

3. Install iOS Dependencies (CocoaPods)

1
2
3

cd SimpleApp/ios
pod install
cd ..
  • This step is required for iOS to set up native dependencies.

4. Run the App

  • iOS:
    1

    npx react-native run-ios
  • Android:
    1

    npx react-native run-android

5. Live Preview

  • Use a simulator/emulator or a real device to see your app.
  • Fast Refresh: Any code changes are reflected instantly in the running app.

Note:
There is no browser-based preview for React Native. The simulator/emulator or device acts as your live preview window.

Feel free to copy and save this summary for your reference! If you need a more detailed or customized version, just let me know.

You can use a Tailwind-like utility-first styling approach in React Native, but you cannot use Tailwind CSS directly (as it’s made for web, not native).
Instead, you use a library that brings Tailwind’s API to React Native.

1. Install the Library

From your project root (SimpleApp):

1

npm install tailwindcss-react-native

2. Initialize Tailwind Config

1

npx tailwindcss-react-native init

This creates a tailwind.config.js file.

3. Use Tailwind Classes in Your Components

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import { Text, View } from 'react-native';
import { styled } from 'tailwindcss-react-native';

const StyledView = styled(View);
const StyledText = styled(Text);

export default function App() {
  return (
    <StyledView className="flex-1 justify-center items-center bg-white">
      <StyledText className="text-2xl font-bold text-gray-800">
        Hello, Tailwind in React Native!
      </StyledText>
    </StyledView>
  );
}

Or, you can use the useTailwind hook for dynamic classes.

Alternative: nativewind

Another popular library is nativewind:

1

npm install nativewind

And use it like:

1
2
3
4
5
6
7
8
9
10
11

import { View, Text } from 'react-native';

export default function App() {
  return (
    <View className="flex-1 justify-center items-center bg-white">
      <Text className="text-2xl font-bold text-gray-800">
        Hello, NativeWind!
      </Text>
    </View>
  );
}

Summary Table

LibraryInstall CommandDocs/Link
tailwindcss-react-nativenpm install tailwindcss-react-nativehttps://github.com/jaredh159/tailwindcss-react-native
nativewindnpm install nativewindhttps://www.nativewind.dev/

Recommendation:
For the most “Tailwind-like” experience, try nativewind—it’s actively maintained and widely used.

Let me know if you want a step-by-step setup for either library!

Correct—React Native does not have a built-in, native gradient component (like a <View style= /> in web).
You cannot create a true gradient background using only the built-in View and StyleSheet components.

What are your options?

  1. react-native-linear-gradient
    This is the most popular and recommended way. It’s a third-party library, but it’s widely used and well-supported.
    It works on both iOS and Android, and is the standard for gradients in React Native.

  2. Simulated Gradients (what you just did)
    You can layer multiple semi-transparent Views with different colors and shapes to create a “gradient-like” effect, but it’s not a true gradient and is limited in flexibility and appearance.

  3. Images
    You can use a gradient image as a background with the ImageBackground component, but this is less flexible and not dynamic.

Why isn’t there a native gradient?

  • The core React Native View does not support gradients out of the box because gradients are not a cross-platform primitive in the same way as on the web.
  • Gradients require platform-specific drawing APIs (like iOS’s CoreGraphics or Android’s Shader), which is what libraries like react-native-linear-gradient use under the hood.

Summary:

  • There is no built-in, native gradient in React Native core.
  • For real gradients, use react-native-linear-gradient (recommended).
  • For simple effects, you can layer Views, but it’s not a true gradient.

If you want to go back to using react-native-linear-gradient, just let me know!

Absolutely! Here’s a detailed log of your troubleshooting and setup process, formatted in Markdown for your dev blog:

React Native Gradient Background: Troubleshooting & Setup Log

1. Project Initialization

  • Created a new React Native project:
    1

    npx @react-native-community/cli init SimpleApp
  • Simplified App.tsx to display a centered message.

2. Adding a Gradient Background

  • Tried to use react-native-linear-gradient for a gradient background:
    1

    npm install react-native-linear-gradient
  • For iOS, ran:
    1
2
3

    cd ios
pod install
cd ..

3. Encountered Errors

  • Metro error:
    Unable to resolve module react-native-linear-gradient... could not be found within the project or in these directories: node_modules

  • Further error:
    Unable to resolve module ./Libraries/Components/Button from .../node_modules/react-native/index.js: None of these files exist: ...

4. Root Cause: Node.js Version

  • Realized the Node.js version was too new/unstable for React Native and its dependencies.
  • React Native is tested and supported on Node 18 or Node 20 (LTS).

5. Solution: Use a Stable Node Version

Switch Node Version (using nvm):

1
2

nvm install 20
nvm use 20

or

1
2

nvm install 18
nvm use 18

Clean and Reinstall Dependencies:

1
2
3

rm -rf node_modules package-lock.json
npm install
npm install react-native-linear-gradient

For iOS:

1
2
3

cd ios
pod install
cd ..

Restart Metro and Rebuild:

1
2
3
4
5

npx react-native start --reset-cache
# In another terminal:
npx react-native run-ios
# or
npx react-native run-android

6. Final Working Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

export default function App() {
  return (
    <LinearGradient
      colors={['#6366f1', '#2dd4bf']} // indigo-500 to teal-400
      start=
      end=
      style={styles.gradient}
    >
      <View style={styles.centered}>
        <Text style={styles.text}>Hello, React Native!</Text>
      </View>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  gradient: {
    flex: 1,
  },
  centered: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#fff',
  },
});

7. Key Lessons Learned

  • Always use a stable Node.js LTS version (18 or 20) for React Native projects.
  • If you see missing module errors, especially for core React Native files, your node_modules is likely corrupted—clean and reinstall.
  • For gradients, use react-native-linear-gradient and always rebuild native code after installing native modules.

This log should help anyone facing similar issues with gradients or module resolution in React Native!

Let me know if you want to add or clarify anything else for your blog!

This post is licensed under CC BY 4.0 by the author.