First of all this is my first question ever so i apologies if it wastes anyones time.
Currently i've been trying to see if i can use tailwind with reactNative for one of my school projects.
I've run into a problem postsetup (i assume postsetup).
The following code when exported to the web using expo start web displays indigo text and a black background in at the top of the browser.
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<>
<View className="bg-black">
<Text className="text-indigo-500">Open up App.js to start working on
your app!</Text>
<StatusBar style="auto" />
</View>
</>
);
}
Now when i do the following:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<>
<View className="bg-black items-center">
<Text className="text-indigo-500">Open up App.js to start
working on your app!</Text>
<StatusBar style="auto" />
</View>
</>
);
}
I've now added items-center to the view, and suddenly it doesn't display the background-color or align the text at the center. Why is this?
React components by default do not support tailwind. However, NativeWind makes it possible to use tailwind in react native
Related
I am using NativeWind CSS which is a React-Native library which mimics tailwind css. My stylings don't seem to be having an effect on the Button component. Stylings are working on other components just not this one.
<Button
title="Post"
className="rounded-full"
color="#568203"
accessibilityLabel=""
/>
use style prop to apply classes for button component in React-Native using TailwindCSS
For example, to apply the bg-blue-500 and text-white classes to a button, you can do the following:
import { StyleSheet, Text, TouchableOpacity } from 'react-native';
import { tailwind } from 'tailwindcss-rn';
const styles = StyleSheet.create({
button: tailwind('bg-blue-500 text-white'),
});
function MyButton() {
return (
<TouchableOpacity style={styles.button}>
<Text>Click me</Text>
</TouchableOpacity>
);
}
For NativeWind, you can use the nw prop instead of style, and also import the class names,
import { Text, TouchableOpacity } from 'react-native';
import { nw } from 'nativewind';
const styles = nw`bg-blue-500 text-white`;
function MyButton() {
return (
<TouchableOpacity nw={styles}>
<Text>Click me</Text>
</TouchableOpacity>
);
}
So, i was trying to do a fade animation using react-native-animated API but unfortunately it does'nt gets animated when i try to render it on my android device. It just dont animate anything and screen is also blank but after sometime(say 30-40 secs) the text shows up with no animation. If i don't apply Animated.View than text shows up immediately or you can say normal rendering of content. Can anyone find what i am doing wrong with this code or what else should i add to make this work.
react-native-animatable version : 1.3.3
import React, { Component } from 'react';
import { Text, View, ScrollView } from 'react-native';
import { Card, } from 'react-native-elements';
import * as Animatable from 'react-native-animatable';
function History() {
return(
<View>
<Text style = {{margin:10}}>
Started in 2010, Eatsy quickly established itself as a culinary icon par excellence in Hong Kong. With its unique brand of world fusion cuisine that can be found nowhere else, it enjoys patronage from the A-list clientele in Hong Kong. Featuring four of the best three-star Michelin chefs in the world, you never know what will arrive on your plate the next time you visit us.
</Text>
</View>
);
}
class Test extends Component{
render()
{
return(
<ScrollView>
<Animatable.View animation="fadeInDown" duration={2000} delay={1000}>
<Card title ='Our History'>
<History />
</Card>
</Animatable.View>
</ScrollView>
);
}
};
export default Test;
Ok so now I got to know the solution after browsing internet for hours, you just have to add useNativeDriver='true' inside <Animatable.View> just like this:
<Animatable.View animation="fadeInUp" useNativeDriver='true' duration={2000} delay={1000}>
I simply import Modal from react-native and run simple test.
I found out that if I reload with <Modal visible={true}> it just crash my app. It wont reload until I re-open it, it works perfectly fine when reload with visible={false}
import React , {Component} from 'React';
import {View,Modal,Text} from 'react-native';
export default class Test extends Component{
render(){
return(
<View>
<Modal visible={true} >
<Text>Before Reload</Text>
<Text>when reload only Before reload show up ,no-error or any information</Text>
</Modal>
</View>
)
}
}
!Update. Found out it's a feature. gonna leave it here in case beginner facing the same problem
Why do you want you modal to be opened by default in a class.
Only make the modal open when you need that i.e on button press etc. If it's open by default try rendering a class instead of a modal
import React , {Component} from 'React';
import {View,Modal,Text} from 'react-native';
export default class Test extends Component{
render(){
return(
<View>
<Modal visible={this.state.modalVisibile} > //This is boolean value and update it's value on a button press.
<Text>Before Reload</Text>
<Text>when reload only Before reload show up ,no-error or any information</Text>
</Modal>
</View>
)
}
}
Also, if the modal is opened by default it will cause many issues
When I am trying to wrap redux form into the react-native elements it shows following error.
this is my code
import React,{ Component } from 'react';
import { Field,reduxForm } from 'redux-form';
import { Text,Input } from 'react-native-elements';
import { View,Button } from 'react-native';
const renderField=({label,keyboardType,name}) => {
return(
<View style={{flexDirection:'row',height:50,alignItems:'center' }}>
<Text>
{label}
</Text>
<Input />
</View>
)
}
const RegisterForm=props => {
const {handleSubmit}=props;
return(
<View style={{flex:1,flexDirection:'column',margin:40,justifyContent:'flex-start'}}>
<Field label="Username" component={renderField} name="username" />
<Button title='SUBMIT' onPress={handleSubmit} />
</View>
)
}
const Register=reduxForm({
form:'register',
})(RegisterForm);
export default Register;
When used FormInput in react-native elements it works then I am changed it into react-native elements 1.0.0beta4 and replace the formInput with Input component.
After that it shows above error.My debugger window also shows an error
debugger window
The error is due to your upgrade to react-native-elements beta which include breaking changes like the button component props :
The actual error is located in welcomePage.js file (as you can see in debugger), you need to change the object you pass to the button icon prop to a react component (see the button doc in the link above).
I am fairly new to react native, nativebase, and Exponent. Unfortunately, I am having trouble getting simple components even to display. I've spent probably 6+ hours troubleshooting simple tutorial components from the nativebase documentation. I feel like I'm just missing something fundamental and I would really appreciate a helping hand.
Here's what I'm doing:
Using Exponent XDE to run my project.
Installed nativebase according to the documentation, no errors at this point.
main.js
'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native';
import { Container } from 'native-base';
import { CardImageExample } from './component/card.js';
AppRegistry.registerComponent('main', () => CardImageExample);
card.js
import React, { Component, Image } from 'react';
import { Container, Content, Card, CardItem, Thumbnail, Text, Icon } from 'native-base';
class CardImageExample extends Component {
render() {
return (
<Container>
<Content>
<Card>
<CardItem>
<Thumbnail source={require('./img/penguin-icon.png')} />
<Text>Instrumental Songs</Text>
<Text note>Guitar</Text>
</CardItem>
<CardItem>
<Image style={{ resizeMode: 'cover' }} source={require('./img/penguin.jpg')} />
</CardItem>
<CardItem>
<Icon name='ios-musical-notes' style={{color : '#ED4A6A'}} />
<Text>Listen now</Text>
</CardItem>
</Card>
</Content>
</Container>
);
}
}
export default CardImageExample;
Current error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
I just have absolutely no idea where to start. Thanks.
Your main.js should like some thing Like
import * as Exponent from 'exponent';
import React from 'react';
import First from './src/app';
import { Container, Header, Title, Content, Button, Left, Right, Body,Icon, Separator } from 'native-base';
class App extends React.Component {
render() {
return <First / > ;
}
}
Exponent.registerRootComponent(App);
You have to register your app like this Exponent.registerRootComponent(App).
If you are using Exponent.
Example: https://github.com/exponent/nativebase-example