I am trying to use Native-Base radio buttons. I've added some additional code to it for making radio buttons work. While it's still not working. Here is the code:
import React, { Component } from 'react';
import { Container, Header, Content, ListItem, Text, Radio, Right } from 'native-base';
export default class RadioButtonExample extends Component {
constructor() {
super();
this.state = {
itemSelected: 'itemOne',
}
}
render() {
return (
<Container>
<Header />
<Content>
<ListItem>
<Text>Daily Stand Up</Text>
<Right>
<Radio onPress={() => this.setState({ itemSelected: 'itemOne' })}
selected={this.state.itemSelected == 'itemOne'}
/>
</Right>
</ListItem>
<ListItem>
<Text>Discussion with Client</Text>
<Right>
<Radio onPress={() => this.setState({ itemSelected: 'itemTwo' })}
selected={this.state.itemSelected == 'itemTwo' }
/>
</Right>
</ListItem>
</Content>
</Container>
);
}
}
How can this code be fixed? What's wrong?
Handle the onPress event in the ListItem
import React, { Component } from "react";
import { Container, Header, Content, ListItem, Text, Radio, Right } from "native-base";
export default class RadioButtonExample extends Component {
constructor() {
super();
this.state = {
itemSelected: "itemOne",
};
}
render() {
return (
<Container>
<Header />
<Content>
<ListItem onPress={() => this.setState({ itemSelected: "itemOne" })}>
<Text>Daily Stand Up</Text>
<Right>
<Radio selected={this.state.itemSelected == "itemOne"} />
</Right>
</ListItem>
<ListItem onPress={() => this.setState({ itemSelected: "itemTwo" })}>
<Text>Discussion with Client</Text>
<Right>
<Radio selected={this.state.itemSelected == "itemTwo"} />
</Right>
</ListItem>
</Content>
</Container>
);
}
}
Related
I'm trying to refresh the Flatlist when a user type something in the search bar, but I don't know exactly how to do it.
The goal here is to display all french county returned by the API and when you enter something in the search bar the API will return only certain county
I'm using NativeBase and Axios
import React from 'react'
import { View, StyleSheet, StatusBar, ListView, FlatList} from 'react-native'
import { } from 'react-navigation'
import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text, List, ListItem, Spinner, Toast, Root, Input, Item } from 'native-base';
import axios from 'axios';
import { Directions } from 'react-native-gesture-handler';
export default class Home extends React.Component {
constructor(props) {
super(props)
this.state = {
data : null,
departement : ""
}
this.fetchDepartements();
}
fetchDepartements() {
axios.get('http://192.168.1.12/APIGSBPraticien.php?departement=' + this.state.departement).then((response) => {
console.log(response.data)
this.setState({data : response.data})
})
.catch(error => {
console.log(error);
});
}
renderItem = ({ item }) => {
return (
<ListItem>
<Text>{item.PRA_Departement==null ? "Code Postal: " + item.PRA_CP:item.PRA_Departement}</Text>
</ListItem>
)
}
handleSearch = (text) => {
console.log(text);
this.setState({departement: text}),
() => { this.fetchDepartements}
};
render() {
if (this.state.data === null) {
return(
<Container style={{marginTop: 20}}>
<StatusBar translucent={false} />
<Header>
<Left>
<Button onPress={() => this.props.navigation.openDrawer()} transparent>
<Icon name='menu' />
</Button>
</Left>
<Body>
<Title>Accueil</Title>
</Body>
</Header>
<Content>
<Spinner style={{marginVertical:250}} color='green'/>
</Content>
</Container>
)
} else {
return (
<Root>
<Container style={{marginTop: 20}}>
<StatusBar translucent={false} />
<Header>
<Left>
<Button onPress={() => this.props.navigation.openDrawer()} transparent>
<Icon name='menu' />
</Button>
</Left>
<Body>
<Title>Accueil</Title>
</Body>
</Header>
<Header searchBar rounded>
<Item>
<Icon name="search" />
<Input onSubmitEditing={text => this.handleSearch(text)} placeholder="Rechercher ..." />
</Item>
</Header>
<Content>
<FlatList
data={this.state.data}
renderItem={this.renderItem}
keyExtractor={item => item.PRA_NUM}
onEndReached={()=> Toast.show({
text: 'Chargement terminé !',
type: "success",
textStyle: {marginHorizontal:100}
})}
/>
</Content>
</Container>
</Root>
)
}
}
}
I tried to get the user's input ( handleSearch() ) and update the state but once done I want to refresh the Flatlist.
I need to set a custom color for Radio button, here is what i tired :
<Radio
color={"#ff0000"}
selectedColor={"#ff0000"}
selected={true}
onPress={ ()=> this.props.somefunc() }
/>
I find it working. Try this code.
import React, { Component } from 'react';
import { Container, Header, Content, ListItem, Text, Radio, Right } from 'native-base';
export default class App extends Component {
state = {
radioBtnOne: false,
radioBtnTwo: false
}
render() {
return (
<Container>
<Header />
<Content>
<ListItem onPress={() => this.setState({ radioBtnOne: !this.state.radioBtnOne })}>
<Text>Daily Stand Up</Text>
<Right>
<Radio selected={this.state.radioBtnOne} color="red" selectedColor="green" onPress={() => this.setState({ radioBtnOne: !this.state.radioBtnOne })} />
</Right>
</ListItem>
<ListItem onPress={() => this.setState({ radioBtnTwo: !this.state.radioBtnTwo })}>
<Text>Discussion with Client</Text>
<Right>
<Radio selected={this.state.radioBtnTwo} color="red" selectedColor="green" onPress={() => this.setState({ radioBtnOne: !this.state.radioBtnOne })} />
</Right>
</ListItem>
</Content>
</Container>
);
}
}
Gif
The problem was solved in the new version of native base (2.7.2).
same problem that's why i used
library : react-native-flexi-radio-button
also you use one of following libraries
1: react-native-simple-radio-button
2: radio-button-react-native
When radio button not selected:
<Radio selected={false} color="gray" selectedColor="green" />
When radio button selected:
i got a little problem with Header component in NativeBase (UI Component for React Native). Its position should be on top. But, mine is below a white block. I don't know why its there.
Here my code
import React, { Component } from 'react';
import { Image } from 'react-native';
import {
Container,
Header,
Left,
Body,
Right,
Title,
Content,
Footer,
FooterTab,
Button,
Icon,
Text,
List,
ListItem,
Switch,
Item,
Input,
Form,
DeckSwiper,
Card,
CardItem,
Thumbnail,
View
} from 'native-base';
import { Col, Row, Grid } from "react-native-easy-grid";
import { StackNavigator } from 'react-navigation';
import Expo from "expo";
import { cards, groups_category } from '../data/dummies';
class HomeScreen extends Component {
constructor (props) {
super(props);
this.state = {
loading: true,
isUserLogin: false,
searchStatus: false
}
this.showSearch = this.showSearch.bind(this);
this.checkLoginStatus = this.checkLoginStatus.bind(this);
}
async componentWillMount() {
await Expo.Font.loadAsync({
'Roboto': require('native-base/Fonts/Roboto.ttf'),
'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
'Ionicons': require("#expo/vector-icons/fonts/Ionicons.ttf")
});
this.setState({ loading: false });
}
showSearch () {
this.setState({ searchStatus: !this.state.searchStatus });
}
checkLoginStatus () {
if (!this.state.isUserLogin) {
return this.props.navigation.navigate('Login');
} else {
return
}
}
render() {
if (this.state.loading) {
return <Expo.AppLoading />;
}
return (
<Container>
{ this.state.searchStatus &&
(<Header searchBar rounded>
<Item regular>
<Icon name='md-arrow-back' onPress={this.showSearch} />
<Input placeholder='Contoh: Jakarta Memancing'/>
<Icon name='search' />
</Item>
</Header>)
}
{ !this.state.searchStatus &&
(<Header>
<Left>
<Icon name='add' style={{color: '#FFFFFF'}} />
</Left>
<Body style={{ alignItems: 'center' }}>
<Title>Komunitas</Title>
</Body>
<Right>
<Icon name='search' style={{color: '#FFFFFF'}} onPress={this.showSearch} />
</Right>
</Header>)
}
{/* Content */}
<Content padder={true}>
<View style={{height: 470}}>
<DeckSwiper
dataSource={cards}
renderItem={item =>
<Card style={{ elevation: 3 }}>
<CardItem>
<Left>
<Thumbnail source={item.image} />
<Body>
<Text>{item.text}</Text>
<Text note>NativeBase</Text>
</Body>
</Left>
</CardItem>
<CardItem cardBody>
<Image style={{ height: 300, flex: 1 }} source={item.image} />
</CardItem>
<CardItem>
<Icon name="heart" style={{ color: '#ED4A6A' }} />
<Text>{item.name}</Text>
</CardItem>
</Card>
}
/>
</View>
<List>
<ListItem itemHeader first>
<Text>Kategori Grup</Text>
</ListItem>
{groups_category.map(group => {
return (<ListItem key={group.id}>
<Left>
<Icon name={group.icon}/>
</Left>
<Body>
<Text>{group.name}</Text>
</Body>
<Right />
</ListItem>)
}
)}
</List>
</Content>
{/* Content */}
<Footer>
<FooterTab>
<Button vertical active>
<Icon active name="home" />
<Text style={{fontSize: 9.5}}>Home</Text>
</Button>
<Button vertical>
<Icon name="megaphone" />
<Text style={{fontSize: 9.5}}>Baru</Text>
</Button>
<Button vertical>
<Icon name="notifications" />
<Text style={{fontSize: 9.5}}>Notifikasi</Text>
</Button>
<Button onPress={this.checkLoginStatus} vertical>
<Icon name="person" />
<Text style={{fontSize: 9.5}}>Profil</Text>
</Button>
</FooterTab>
</Footer>
</Container>
);
}
}
export default HomeScreen;
It results like this
As you can see the Header which has search icon is located below an empty space / white color. Why this happen ? Maybe there are a lot of friends here had experienced it before when using NativeBase UI Component.
It's because you are using StackNavigator as well. You can disable the header as below.
static navigationOptions = {
headerMode: 'none'
}
UPDATE for React Navigation 5.x
If you want to use Nativebase's header with react navigation 5, you can do it like this:
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import {
Header,
Left,
Body,
Title,
Button,
Icon,
View,
Text
} from 'native-base';
const Stack = createStackNavigator();
const Home = () => {
return (
<View>
<Text>Hello World</Text>
</View>
)
}
const CustomHeader = ({scene, previous, navigation}) => {
const {options} = scene.descriptor;
const title =
options.headerTitle !== undefined
? options.headerTitle
: options.title !== undefined
? options.title
: scene.route.name;
return (
<Header>
<Left>
{previous ? (
<Button transparent onPress={navigation.goBack}>
<Icon name="arrow-back" />
</Button>
) : (
undefined
)}
</Left>
<Body>
<Title>{title}</Title>
</Body>
</Header>
);
};
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={Home}
options={{
header: (props) => <CustomHeader {...props} />,
}}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
More of the options here https://reactnavigation.org/docs/en/stack-navigator.html
Set header null in navigation option to remove top blank space, like below
export default class Home extends React.Component {
static navigationOptions = {
title: 'Home',
header: null //used for removing blank space from top
};
}
I want to toggle multiple data. i tried it but not succeeded .
render() {
return(
<ScrollView style={styles.drawer}>
<View style={styles.content} key={1}>
<ListView
dataSource={this.state.dataSource}
renderRow={(data) =>
<View>
<Text style={styles.navMenuTop} onPress={this.handlePressTopCat.bind(this)}>
{'› '+data.Name}
</Text>
{data.SubItems.map((b,Index) =>
<View style={{height:this.state.SubHeight}}>
<Text style={styles.navMenu} onPress={this.handlePressCatid.bind(this,b.cPath)}> {'» '+b.Name}</Text>
</View>
)}
</View>
}
/>
</View>
</ScrollView>
);
}
}
how can i toggle multiple div. SubItems can be toggle when clicked on navMenuTop. it should be working like menu.
import React, { Component } from 'react';
import { Container, Header, Content, Card, CardItem, Body, Text,Button } from 'native-base';
import _isEqual from 'lodash/isEqual';
import _map from 'lodash/map';
export default class CardExample extends Component {
constructor(props) {
super();
this.state = {
previousState: '',
cardData: [1,2,3,4,5],
};
}
componentWillUpdate(nextProps, nextState) {
if (!_isEqual(this.state.previousState, nextState.previousState)) {
this.setState({ [this.state.previousState]: false});
}
}
open(key){
this.setState({ [key]: !this.state[key],previousState:key});
}
render() {
return (
<Container>
<Header />
<Content>
{
_map(this.state.cardData,(data,key)=>{
return (
<Card>
<CardItem header>
<Text>Card {key} header</Text>
</CardItem>
{
this.state[`open_${key}`] ?
<CardItem>
<Body>
<Text>
This is cardItem {key} Body element
</Text>
</Body>
</CardItem>
: null
}
<CardItem footer>
<Button onPress={()=>this.open(`open_${key}`)}><Text>open {key}</Text></Button>
</CardItem>
</Card>
)
})
}
</Content>
</Container>
);
}
}
I see that there is a Seperator for the List view in native-base like so
import React, { Component } from 'react';
import { Container, Content, ListItem, Text, Separator } from 'native-base';
export default class SeperatorExample extends Component {
render() {
return (
<Container>
<Content>
<Separator bordered>
<Text>FORWARD</Text>
</Separator>
<ListItem >
<Text>Aaron Bennet</Text>
</ListItem>
<ListItem>
<Text>Claire Barclay</Text>
</ListItem>
<ListItem last>
<Text>Kelso Brittany</Text>
</ListItem>
<Separator bordered>
<Text>MIDFIELD</Text>
</Separator>
<ListItem>
<Text>Caroline Aaron</Text>
</ListItem>
</Content>
</Container>
);
}
}
but how would I add in a separator to just a normal text field?
render() {
return (
<Container>
<Content>
<Text>Hello</Text>
</Separator>
<Text>How are you?</Text>
</Content>
</Container>
);
}
as this Separator seems like a List specific piece
You could use your own component to act as a separator.
// separator.js
export default class extends React.component {
render () {
return (
<View style={...this.props.style}>
// If you want children
{ this.props.children }
</View>
)
}
}
// Your other component
import TextSeparator from './separator';
export default class extends React.component {
render () {
return (
<Container>
<Content>
<Text>Hello</Text>
<TextSeparator style={{paddingVertical: 10}} />
<Text>How are you?</Text>
</Content>
</Container>
)
}
}