Skip to content

Instantly share code, notes, and snippets.

@syamjayaraj

syamjayaraj/App.js

Last active August 7, 2018 19:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save syamjayaraj/38caf2a23adf07f8c4b02a767cf8f92a to your computer and use it in GitHub Desktop.
Save syamjayaraj/38caf2a23adf07f8c4b02a767cf8f92a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
App.js
render() {
return (
<Container>
<Header androidStatusBarColor="#af1313" style={{ backgroundColor: '#d11919' }}>
<Body style = {{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', }}>
<Title>BLOOD DONORS</Title>
</Body>
</Header>
<Content style = {{ marginLeft: 10, marginRight:10 }}>
<View style = {{ backgroundColor:"#f2eded", marginTop: 10 }}>
{this.state.isSubmited
?
<TouchableOpacity onPress = { () => this._toggleDonorPost()}>
<Text style = {{ fontSize:20, color:'#770707', }}>Add more donors</Text>
</TouchableOpacity>
:
<View style = {{ paddingLeft: 20, paddingRight: 20, paddingBottom: 40 }}>
<View style = {{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', marginTop:20 }}>
<Text style = {{ fontSize:15, fontWeight: 'bold', color:'#e89494', }}>DONATE YOUR BLOOD</Text>
</View>
<Item rounded style = {{ marginBottom: 20, marginTop:20 }}>
<Input placeholder="Name"
onChangeText={input => this.setState({ name: input })}
/>
</Item>
<Item rounded style = {{ marginBottom: 20, marginTop:20 }}>
<Input placeholder="Mobile"
onChangeText={input => this.setState({ mobile: input })}
keyboardType = { "phone-pad" }
/>
</Item>
<View style = { styles.picker }>
<Picker
selectedValue={ (this.state.group && this.state.pickerValue) || 'a'}
onValueChange={this.onValueChange.bind(this)}>
<Picker.Item label="Blood Group" value="null" />
<Picker.Item label="A+" value="A+" />
<Picker.Item label="A-" value="A-" />
<Picker.Item label="B+" value="B+" />
<Picker.Item label="B-" value="B-" />
<Picker.Item label="AB+" value="AB+" />
<Picker.Item label="AB-" value="AB-" />
<Picker.Item label="O+" value="O+" />
<Picker.Item label="O-" value="O-" />
</Picker>
</View>
<Button block light onPress={ () => this.addDonor(this.state.name, this.state.mobile, this.state.group) } style = {{ marginLeft: 30, marginRight:30 }}>
<Text>Add</Text>
</Button>
</View>
}
</View>
<View>
<View style = {{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', marginTop:20, marginBottom: 10 }}>
<Text style = {{ fontSize:15, fontWeight: 'bold', color:'#e89494', }}>DONORS</Text>
</View>
<View style = { styles.picker }>
<Picker
selectedValue={ (this.state.grouptoBeFiltered && this.state.pickerValue) || 'a'}
onValueChange={this.onValueChange2.bind(this)}>
<Picker.Item label="Blood Group" value="null" />
<Picker.Item label="A+" value="A+" />
<Picker.Item label="A-" value="A-" />
<Picker.Item label="B+" value="B+" />
<Picker.Item label="B-" value="B-" />
<Picker.Item label="AB+" value="AB+" />
<Picker.Item label="AB-" value="AB-" />
<Picker.Item label="O+" value="O+" />
<Picker.Item label="O-" value="O-" />
</Picker>
</View>
</View>
{this.state.grouptoBeFiltered == null
?
null
:
<View>
{this.state.donors.filter( element => element.group ==this.state.grouptoBeFiltered).map((item, index) => (
<List>
<ListItem thumbnail>
<Left>
</Left>
<Body>
<Text>{item.name} ({item.group})</Text>
<Text note numberOfLines={1}>Mob: {item.mobile}</Text>
</Body>
<Right>
<Button transparent onPress={() => Communications.phonecall(`${item.mobile}`, true)}>
<Text>Call</Text>
</Button>
</Right>
</ListItem>
</List>
))}
</View>
}
</Content>
</Container>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment