React Native Horizontal ScrollView

 App Name: Test

Component Name: App.js

-------------------------------------------------------------------------------------------------------------------

/* eslint-disable prettier/prettier */
import React, { Component } from 'react';
import {
StyleSheet,
Button,
ScrollView,
Text,
View,
} from 'react-native';
class App extends Component {
onPressButton() {
alert('You Clicked ReactNative King button ')
}
render() {
return (
<ScrollView horizontal={true} style={StyleSheet.container}>
<Text style={{fontSize:25, padding: 20}}>Horizontal ScrollView</Text>
<View style={[{width:230,height: 80, padding: 20}]}>
<Button
onPress={this.onPressButton}
title="Click Me"
color="red"
/>
</View>
</ScrollView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
})
export default App;

Comments

Post a Comment

Popular posts from this blog

React Native FlatList

Image
 App Name: Test  Component Name: App.js ------------------------------------------------------------------------------------ import React , { useState } from 'react' ; import { StyleSheet , Text , View , FlatList , } from 'react-native' ; // class App extends Component { export default function App (){ const [ people , ] = useState ([ { name : 'ReactNative King' , id : '1' }, { name : 'ReactNative King' , id : '2' }, { name : 'ReactNative King' , id : '3' }, { name : 'ReactNative Kingaun' , id : '4' }, { name : 'ReactNative King' , id : '5' }, { name : 'ReactNative King' , id : '6' }, { name : 'ReactNative King' , id : '7' }, ]); // render() { return ( < View style = { styles . container } > < FlatList keyEtractor = { ( item ) => item . i...
Read more

React Native class component

Image
class component: class component access react lifecycle methods and render and state props functionality. app name : test component name: App.js ----------------------------------------------------------------------------------------------------------------------- /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import React , { Component } from 'react' import { View , Text , Button , } from 'react-native' ; class App extends Component { render () { function hello (){ alert ( "Welcome class component ReactNative King" ) } return ( < View > < Text > Class Component </ Text > < Button title = "Click Me " onPress = { hello } /> </ View > ) } } export default App ;
Read more