Created
February 20, 2020 21:10
-
-
Save blewert/970b08cd12706846f33f1b15642d39cc to your computer and use it in GitHub Desktop.
A working example of a horizontal ScrollView with some example click events.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
import { StyleSheet, Text, View, Button, ScrollView } from 'react-native'; | |
class DoggoListButton extends Component | |
{ | |
handlePressButton() | |
{ | |
//This is called when you press this doggo button | |
//it just prints out the name of this doggo and its number that was passed :) | |
alert("hello i am " + this.props.doggo + ", my number is " + this.props.num + " and I am the bestest boyo in the whole wide WORLD"); | |
} | |
render() | |
{ | |
//The doggo button is just a button but with two things: a title of this doggo | |
//and an onPress event which calls the function above called handlePressButton ^ ^ ^ | |
return <> | |
<View style={{ flex: 1, marginRight: 10 }}> | |
<Button onPress={this.handlePressButton.bind(this)} title={this.props.doggo}/> | |
</View> | |
</>; | |
} | |
} | |
class NavigationBar extends Component | |
{ | |
render() | |
{ | |
//The list of buttons we're gonna make for this navigation bar | |
let items = []; | |
//An array of the BEST hecking doggos in the whole WORLD | |
let specialDoggos = ["copper", "pickle", "gimms", "barkley"]; | |
//A function that will return a random woofer name for us | |
let randomDoggo = x => specialDoggos[Math.floor(Math.random() * specialDoggos.length)]; | |
for(let i = 0; i < 20; i++) | |
{ | |
//Build button with a random doggo name and the number of this doggo | |
let item = <DoggoListButton key={i} num={i} doggo={randomDoggo()} /> | |
//Add it to the list of doggo buttons :) | |
items.push(item); | |
} | |
//This just makes a scrolley scrolley horizontal list of those doggo | |
//buttons we just made | |
return ( | |
<View> | |
<ScrollView style={{ paddingTop: 10 }} horizontal={true}> | |
{items} | |
</ScrollView> | |
</View> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment