I just started and installed react-native. After installing, I wrote some codes from skeleton codes, but height is always 667.
Even View height is only 300, AppContainer height is 667, View height is more than 667, it cuts contents not expanding height.
Could you help me to figure out this?
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class AwesomeProject extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
Related
I am trying to create a cardview in react-native with a title and body. however, i want to add a background color to the tittle but not able to do it.
i was able to create the cardview with a title header but not able to add a background color that covers the entire portion of the header.
see image attached for an example of what i want to implement.
As you can see, the card view has a tittle of summary and the title/header portion has a gray background. below the header is the body which contain the content of the cardview. i want to implement the same in react-native. can someone help? thanks in advance
//This is an example of Card View//
import React from 'react';
//import react in our code.
import { Text, View, StyleSheet } from 'react-native';
//import all the components we are going to use.
import { Card } from 'react-native-elements';
//import Card
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Card title="Local Modules">
{/*react-native-elements Card*/}
<Text style={styles.paragraph}>
This is a card from the react-native-elements
</Text>
</Card>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: 40,
backgroundColor: '#ecf0f1',
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
color: '#34495e',
},
});
Try this:
<Card title={
<View style={{ backgroundColor: 'red'}}>
<Text>Local Modules</Text>
</View>
}
...
/>
Edit your code like this :
//This is an example of Card View//
import React from 'react';
//import react in our code.
import { Text, View, StyleSheet } from 'react-native';
//import all the components we are going to use.
import { Card } from 'react-native-elements';
//import Card
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Card title="Local Modules">
<View style={styles.header}>
<Text> Summary </Text>
</View>
<Text style={styles.paragraph}>
This is a card from the react-native-elements
</Text>
</Card>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: 40,
backgroundColor: '#ecf0f1',
},
header: {
backgroundColor : '#C4C4C4'
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
color: '#34495e',
},
});
I'm pretty new to ReactNative world. Im struggling to find an api or a library that shows the Progress Dialog as below in React Native. I believe ActivityIndicator can be used, but it does not show as overlay. Can anyone help me how can I show as an overlay using styles or if there is good library to make this.
Thanks
Here is the code to Open Prgressbar:
import React from 'react';
import { Modal, View, Text, ActivityIndicator, Button } from 'react-native';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { isProgress: false }
}
openProgressbar = () => {
this.setState({ isProgress: true })
}
render() {
return (
this.state.isProgress ?
<CustomProgressBar />
:
<View style={{ flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' }}>
<Button title="Please click here to Open ProgressBar" onPress={this.openProgressbar} />
</View>
);
}
}
const CustomProgressBar = ({ visible }) => (
<Modal onRequestClose={() => null} visible={visible}>
<View style={{ flex: 1, backgroundColor: '#dcdcdc', alignItems: 'center', justifyContent: 'center' }}>
<View style={{ borderRadius: 10, backgroundColor: 'white', padding: 25 }}>
<Text style={{ fontSize: 20, fontWeight: '200' }}>Loading</Text>
<ActivityIndicator size="large" />
</View>
</View>
</Modal>
);
Expo url for live demo
https://snack.expo.io/#jitendra.mca13/progress-bar-demo
I would approach this by using the React Native Modal component with two Views.
This solution is a React solution and not native, so you will need to style your Modal accordingly for each platform.
import React from 'react';
import {
Modal,
View,
StyleSheet,
Text,
ActivityIndicator
} from 'react-native';
const ProgressDialog = ({ visible }) => (
<Modal
visible={visible}
>
<View style={styles.container}>
<View style={styles.content}>
<Text style={styles.title}>Please Wait</Text>
<View style={styles.loading}>
<View style={styles.loader}>
<ActivityIndicator size="large" />
</View>
<View style={styles.loadingContent}>
<Text>Loading</Text>
</View>
</View>
</View>
</View>
</Modal>
);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, .5)',
alignItems: 'center',
justifyContent: 'center',
},
content: {
padding: 35,
backgroundColor: 'white'
},
title: {
fontSize: 18,
fontWeight: 'bold',
},
loading: {
flexDirection: 'row',
alignItems: 'center',
},
loader: {
flex: 1,
},
loadingContent: {
flex: 3,
fontSize: 16,
paddingHorizontal: 10,
}
})
export default ProgressDialog;
Here's a demo on Expo, of course you will probably want to tweak the CSS.
Android & iOS solution
Create a directory called ProgressDialog
Create index.ios.js and index.android.js
Paste the above code into both index.ios.js and index.android.js
Make CSS changes for iOS
You can use the below npm package which is a very easy and attractive loader with many options.
https://github.com/maxs15/react-native-spinkit
import React from 'react';
import { StyleSheet, View } from "react-native";
import Spinner from "react-native-spinkit";
export default LoadingCmpBig = props => {
return (
<View style={styles.container}>
<StatusBar barStyle="default" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
//backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
}
});
You can use this component and use it where you want to show the Progress. You just have to maintain the state for visible the loading or not in your render function of the component.
I'm an absolute newbie when it comes to react-native. I've been following a tutorial, but not all of the code is provided. I've done my best - the app compiles - but all I see is a blank white page in iOS simulator. Can anyone help me understand why I'm not seeing the labels from the SearchPage component?
App.js:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
'use strict';
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
NavigatorIOS
} from 'react-native';
import SearchPage from './SearchPage';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component<{}> {
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={
{
title: 'Property Finder',
component: SearchPage,
}
} />
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
description: {
fontSize: 18,
textAlign: 'center',
color: '#656565',
marginTop: 65,
},
});
SearchPage.js:
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
Text,
TextInput,
View,
Button,
ActivityIndicator,
Image,
} from 'react-native';
export default class SearchPage extends Component<{}> {
render() {
return (
<View style={styles.container}>
<Text style={styles.description}>
Search for houses to buy!
</Text>
<Text style={styles.description}>
Search by place-name or postcode.
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
description: {
marginBottom: 20,
fontSize: 18,
textAlign: 'center',
color: '#656565'
},
container: {
padding: 30,
marginTop: 65,
alignItems: 'center'
},
});
If I replace App.render() with the guts of SearchPage.render(), then I do see the 2 labels.
The tutorial is iOS-specific. Simulator is iPhone 6 iOS 11.2.
If any other info is needed please leave a comment.
In the middle of making a react native application and I'm experimenting with functional programming within React Native and for some reason when I convert the prebuilt code into an arrow function the HOT RELOADING responds but doesn't push the changes please help.
Here's the prebuilt code w/ class
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Component1 from './app/components/msg/propsMsg'
export default class tutorial extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome a React Native Sandbox!
</Text>
<Component1 msg="props MSG"/>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fefefe',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('tutorial', () => tutorial);
Here's my attempt at turning it functional
const tutorial = () => {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome a React Native Sandbox!
</Text>
<Component1 msg="props MSG 2"/>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
)
}
export default tutorial
I am Developing a sample Application in android when i am Developing sample .js page it's getting eroor like as show below page. please rectify this error
this is my Code:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
/* To View the user Bookings Screen */
import React,{Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity,
Image
} from 'react-native';
class DiagnosticCalender extends React.Component {
render() {
return (
<View style={{flexGrow:1,backgroundColor:'green'}}>
<Text style={styles.welcome}>
Coming Soon
</Text>
</View>
);
}
};
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
fontWeight:'bold',
margin: 10
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
}
});
module.exports = DiagnosticCalender;
So, this my Code when i was run the application getting this error.