Is possible to have JSX code inside the Accordion content in native base?
class MyAccount extends React.Component {
render() {
const creditCardContent = (
<Form>
<Item floatingLabel>
<Label>Name on Card</Label>
<Input />
</Item>
<Item floatingLabel>
<Label>Card Number</Label>
<Input />
</Item>
<Item floatingLabel>
<Label>CVC</Label>
<Input />
</Item>
<Item floatingLabel>
<Label>Zip Code</Label>
<Input />
</Item>
</Form>
);
const dataMenus = [
{ title: "Credit Card", content: creditCardContent },
{ title: "Bank Account (for ACH payments)", content: "Lorem ipsum dolor sit amet" },
{ title: "Recurring Payment", content: "Lorem ipsum dolor sit amet" }
];
return (
<Container>
<Content padder>
<ScrollView>
<Accordion dataArray={dataMenus} expanded={0}/>
</ScrollView>
</Content>
</Container>
);
}
}
The result is not showing the Credit Card content (image below)
I'm not sure if I am doing something wrong or it is not possible to do.
Thanks
As far as I remember you can do it with the renderContent property where you can define how it should be rendered. You can pass it as a constant or as a renderContent = (item) => { ... }.
But what you are doing right now is supplying the dataArray with React.Element and then bunch of strings which it can't render.
Related
In the React-pdf library, the onitemclick props of the Outline component only works once, while the same props but of the Document component always work.
I send the piece of code, where you can see that the Outline component is wrapped in a MUI Drawer component, so that the outline is rendered in a sidebar.
const [page, setPage] = useState(1);
const clickTOC = ({ pageNumber: itemPageNumber }) => {
setPage(itemPageNumber)
}
<Grid xl={6}>
<Box sx={{ my: 4 }}>
<Document file={file} onLoadSuccess={onDocumentLoadSuccess} options={options} onItemClick={clickTOC}>
<Page key={`page_${page}`} pageNumber={page} onRenderSuccess={onPageRenderSuccess} customTextRenderer={textRenderer} renderTextLayer="true" />
<Drawer variant="persistent" anchor="left" open={state}>
<DrawerHeader>
<Typography variant="body3" display="block" color='black' gutterBottom>
INDICE
</Typography>
<IconButton onClick={TOCClose}>
<ChevronLeftIcon />
</IconButton>
</DrawerHeader>
<Divider />
<Box sx={{ width: drawerWidth }} role="presentation">
<Outline onItemClick={clickTOC} onLoadSuccess={(outline) => toc(outline)} />
</Box>
</Drawer>
</Document>
<Pagination page={page} count={numPages} color="primary" onChange={(e, page) => setPage(page)} />
</Box>
</Grid>
import {CITYIMG} from '../assets/index';
export default class Login extends Component {
render() {
return (
<Container>
<Image source = {CITYIMG}/>
<Card style={styles.card}>
<Text>
Sign In
</Text>
<Item rounded>
<Input placeholder='Username'/>
</Item>
<Item rounded>
<Input placeholder='Password'/>
</Item>
<Button hasText transparent>
<Text>Forgot Password</Text>
</Button>
<Button rounded>
<Text>Login</Text>
</Button>
<Button rounded>
<Text>Sign Up</Text>
</Button>
</Card>
</Container>
);
}
}
I am exporting images in another folder and get the error:
Expected String or a class function but got undefined . You likely forgot to export your component from the file its defined in.
export const CITYIMG = require('./cityimg.jpg');
for having static images you need to have source={require("../Path/To/picture.extention")}
and you need to require them when you want to use it in the same file(not by exporting and importing)
I am getting this error with my code:
export default class AddExpensePage extends Component {
render() {
return (
<Container>
<Header>
<Title>Add Expense</Title>
</Header>
<Content>
<InputGroup borderType='underline' >
<Input placeholder='Item Name' />
</InputGroup>
<Button primary> Testing </Button>
</Content>
</Container>
);
}
}
And this is the code on their official documentation:
export default class ButtonExample extends Component {
render() {
return (
<Container>
<Content>
// NativeBase default style
<Button> Click Me! </Button>
</Content>
</Container>
);
}
}
I don't get why I have this error because supposedly I do not have to wrap the text "Testing" in Text tags?
You have to wrap in Text tag like:
<Content>
<Button>
<Text>Click Me!</Text>
</Button>
</Content>
DOC
I am using native-base (a material ui library for react-native) with redux form for managing state of form using redux. I am confused with the following bit of code. In below code it is taking number of argument and pass it to Input Tag with triple dot. but i could not identify what is this and from where it is getting rest of properties and how i can apply custom props.
renderInput({ input, label, meta: { touched, error, warning } }){
console.log(input)
var hasError= false;
if(error !== undefined){
hasError= true;
}
return(
<Item error= {hasError}>
<Input {...input}
/>
{hasError ? <Text>{error}</Text> : <Text />}
</Item>
)
}
Below is the render method which is calling above function from Higher Order Field Component of redux form.
render(){
const { handleSubmit, reset } = this.props;
if (!this.state.isReady) {
return <Expo.AppLoading />;
}
return (
<Container>
<Header>
<Body>
<Title>Redux Form</Title>
</Body>
</Header>
<Content padder>
<Field name="email" component={this.renderInput} model="sudhakar" type="text" placeholder="Username" />
<Field name="name" component={this.renderInput} type="password" placeholder="Password" />
<Input name="age" type="text" ref="_age" />
<Button block primary onPress= {this.handleLogin}
style={{marginHorizontal:10,backgroundColor:"#00adef", marginTop:50}}
>
<Text>Submit</Text>
</Button>
</Content>
</Container>
)
}
You can find complete code here
I'm not allowed to post comment because my reputation is below 50.
The triple dot is called spread operator, I think this is the key to understanding what you're confused about. when I first saw this syntax I had the same confusion. try reading the link above plus this and I think you should be able to figure out ur problem :)
I'm trying to trigger the event onChangeText on NativeBase for the Search Bar but I can't figure out how to do it. Here's what I have so far
The alert is not showing at all, should the onChangeText be working here?
_onChangeSearchText(text) {
//do something
}
render() {
return (
<Container>
<Header searchBar rounded
onChangeText={this._onChangeSearchText.bind(this)}
autoCorrect={false}>
<Item>
<Icon name="ios-search" />
<Input placeholder="Search" />
<Icon name="ios-people" />
</Item>
<Button transparent>
<Text>Search</Text>
</Button>
</Header>
</Container>
);
}
Header does not have any onChangeText prop. You have to pass onChangeText to Input.
render() {
return (
<Container>
<Header searchBar rounded autoCorrect={false}>
<Item>
<Icon name="ios-search" />
<Input
onChangeText={this._onChangeSearchText.bind(this)} // <-- Here
placeholder="Search"
/>
<Icon name="ios-people" />
</Item>
<Button transparent>
<Text>Search</Text>
</Button>
</Header>
</Container>
);
}