This is my second go around installing tailwind rn for a project and I simply can't get it to work.
I ran npm install tailwind-rn followed by npx setup-tailwind-rn and I'm running it in development mode after changing the tailwind.config.js to scan the only app file:
content: ["./App.js"],
The App.js file in the meantime looks like this:
import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import {TailwindProvider} from 'tailwind-rn';
import utilities from './tailwind.json';
import { useTailwind } from 'tailwind-rn';
export default function App() {
const tw = useTailwind();
return (
<TailwindProvider utilities={utilities}>
<View>
<Text style={tw('text-blue-600')}>Hello world</Text>
<StatusBar style="auto" />
</View>
</TailwindProvider>
);
}
My tailwind.css and tailwind.json are both populated with defitions for .text-blue-600 and I receive no errors when running, but none of the styles I apply work. Very confused.
I would recommend using tailwind-react-native-classnames from jaredh159. No setup or extra configurations needed after installation. It works out of the box.
This package gives the flexibility of mixing styles.
Install using yarn add twrnc or npm install twrnc.
Get more info from the GitHub page
Related
I am a newbie at react-native and I am facing some issues in the react-native app, after installing 'react-navigation', everything is mentioned in the images. Hope you can help me. Have a good day.
App.js file
MainActivity.java
Package.json
Terminal-issue
Node-cli
First: install #react-navigation/stack by
npm install #react-navigation/stack
using console(console must be opened in your project main directory).
Choose one:
If you are using bare React-Native project install react-gesture-handler using npm install react-native-gesture-handler.
If you are using expo managed project(e.g you created project using npx expo init) - use
npx expo install react-native-gesture-handler.
Docs: https://reactnavigation.org/docs/stack-navigator/
After successfull install please restart your metro/expo server.
Use createNativeStackNavigator from native-stack instead.
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
...
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
...
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
See Installing the native stack navigator library for details.
I have seen this issue posted on stack overflow many times with no clear answer. I'm hoping this question can help me and others out.
I wish to render a URL in react native using react-native-webview
I started a blank react native project using expo init my-app. I ran npm i react-native-webview and react-native link react-native-webview. I then created a file defined as the following
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class WebViewTest extends Component {
render() {
return (
<WebView
source={{ uri: 'https://www.google.com/' }}
style={{ marginTop: 20, width: 400, height: 400 }}
/>
);
}
}
export default WebViewTest;
My app.js imports and renders that file like the following
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import WebViewTest from './Components/WebViewTest';
export default function App() {
return (
<WebViewTest />
);
}
I test this code by running expo start and I open up my project in a web browser.
I then see the following in the browser
I don't get any errors or warnings so where am I going wrong?
As Per The Expo Docs For WebView -
https://docs.expo.io/versions/latest/sdk/webview/
https://www.npmjs.com/package/react-native-webview
It Doesn't Work On Web Using EXPO
Im using React native Expo(36.0.0).
I am developing dashboard screen for my project. So, I just want to show some pie charts in dashboard screen. I have tried many libraries for all kind of charts. Nothing worked for me. Finally I have used react-native-pie with the help of youtube video. Still it is showing me the same error.
And I am new to React native.
Thanks!
import React, { Component } from 'react';
import { View, Text, ScrollView, StyleSheet, TouchableOpacity, ActivityIndicator, Dimensions } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import Pie from 'react-native-pie';
class HomeScreen extends Component
{
constructor(props)
{
super(props);
}
render()
{
return(
<ScrollView>
<View style={styles.homeContainer}>
<View style={{paddingVertical:15, flexDirection:'row', width:350, justifyContent:'center'}}>
<Pie
radius={80}
sections={[
{
percentage:10,
color:'red'
},
{
percentage:30,
color:'green'
},
{
percentage:60,
color:'orange'
}
]}
/>
</View>
</View>
</ScrollView>
)
}
}
const styles = StyleSheet.create({
homeContainer:
{
alignItems:'center',
justifyContent:'center'
},
})
export default HomeScreen;
I think, this is not added in RN 0.62 with auto linking feature, so you can do it like this:
go to your ios folder and your project and click on podfile and add the below line with the other similar pods or add it to the end of the podfile.
pod 'ReactNativeART', :path => '../node_modules/#react-native-community/art'
after that go to your editor terminal open your project from the root folder and then:
cd ios
pod install
cd ..
react-native run-ios
Fix for Android
Step 1
Add this lines to android/settings.gradle
include ':react-native-art'
project(':react-native-art').projectDir = new File(rootProject.projectDir, '../node_modules/#react-native-community/art/android')
Step 2
Add this lines to android/app/build.gradle
dependencies {
...
implementation project(':react-native-art')
}
Step 3
Add this lines to android/app/src/main/.../MainApplication.java
import com.reactnativecommunity.art.ARTPackage;
...
#Override
protected List<ReactPackage> getPackages() {
#SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
...
packages.add(new ARTPackage());
...
return packages;
}
reference : https://www.npmjs.com/package/#react-native-community/art
Thx for help unknown asian guy https://bocoder.tistory.com/m/40
npm install #react-native-community/art --save
run the code below.
~$ npm install #react-native-community/art --save
For react-native < 0.60 you need to link ReactNative ART:
~$ react-native link #react-native-community/art
For react-native >= 0.60 ReactNativeART should be autolinked and no additional action is required.
I wonder how I can save the value from qrcode scanner used in React Native and show the value to another page automatically. Thus, once the qrcode has been scanned, it will be redirected automatically to another page.
Is it possible to use React Navigation?
You can use react-native-qrcode-scanner the library to create this type of functionality.
react-native-camera is a dependency for this package that you'll need to add to your project. To install, run the following commands:
npm install react-native-camera --save
react-native link react-native-camera
After that install and link react-native-qrcode-scanner by the following commands:
npm install react-native-qrcode-scanner --save
react-native link react-native-qrcode-scanner
react-native link react-native-permissions
Here is a sample code for QR scanner
import React, {Component} from 'react';
import {StyleSheet, Text, View, AppRegistry, TouchableOpacity, Linking} from 'react-native';
import QRCodeScanner from 'react-native-qrcode-scanner';
export default class App extends Component {
onSuccess(e) {
//here you can do whatever you want to do on a successful scan
alert(e.data);
}
render() {
return (
<View style={{flex:1, justifyContent: 'center',}}>
<QRCodeScanner
showMarker={true}
onRead={this.onSuccess.bind(this)}
/>
</View>
);
}
}
If have face any difficulty in installation you can visit this link: https://www.npmjs.com/package/react-native-qrcode-scanner
I am trying to run my react native app on my device .
So I am running react-native start
everything looks fine.
and when running react-native run-android I get this error
otherwise, I get this error in my device
My issue was the name I gave the project differed from the name that was being registered in AppRegistry
AppRegistry.registerComponent('proj', () => proj)
proj needs to be the same as the name of the project in the gradle and config files.
You need to export the class. Use the code below
import React, { Component } from 'react'
import { AppRegistry, Text, View } from 'react-native'
export default class proj extends Component {
render() {
return (
<View style={styles.container}> <Text > Welcome to PutainDeBiere! </Text> </View> )
}
}
AppRegistry.registerComponent('proj', () => proj)
Delete / uninstall first the APP installed and then do a clean install of it and see if it works.