I have requirement where I have to create the TextInputs, Buttons, and other UI components, but the issue is I have to create the UI directly from the JSON data provided like
{
key: "TextInput",
props: {
// some props of the component
}
}
I tried to find many libraries which can do such thing in React Native but not getting the results I want.
You import the JSON data and check if a value exists or map/loop through an array of values
So for instance
import data from 'data.json'
{data.key && (
<TextInput value={data.key}></TextInput>
)}
Related
I am trying to extract JSON data which I am doing using the POST request in react native can somebody let me know how to do that
and I want to pass the extracted data to another screen as well
If you are posting any data by POST method then you must have to use GET method to extract the data. You can use axios for it like
`axios.get('endpoint').then(res => res.json)`
After getting your data you can store it in some state and then you have to pass the data to other screens like below:
onPress={() => {
this.props.navigation.navigate('YourScreenName', {
data: item.data,
});
}}
I have Components directory, there is js file Timer where I have countdown Component
const [countdownTimer, setCountdownTimer] = useState(15);
This component only returns <Text>{countdownTimer}</Text> on screen.
I also have another component Description. I want to handle this state in my Description component to make some changes after time has changed. The components aren't related (they aren't imported in each other)
I tried to import Description in Timer to send value as a props like
<Description setCountdownTimer={setCountdownTimer} />
and with style hide it but display: none isn't working on Android. I also try to just hide with another method
{false && <Description setCountdownTimer={setCountdownTimer} />}
but it's also not working, I got "undefined" in console.
For your case you should take a look at React Context: https://reactjs.org/docs/context.html
Hi #Danny If I understood your question correctly, you are trying to share the countDown state between two different components, and the way you try to do it may complicate you a bit, if not I suggest you use redux which is a library designed in order to manage the global states of applications, with redux you will be able to share the states of your application with several components.
You should need to create reducers and thanks to the createStore method from `redux you will be able to use a global state to your entire application
Here it's an example of code you can improve depending on your need :
import { createStore } from 'redux';
import reducer from './reducer';
import { Provider } from 'react-redux';
const store = createStore(reducer);
export default function App () {
return (
<Provider store = {store}>
<YourMainComponent />
</Provider>
)
}
You just need to wrapp your main component with the Provider component from 'react-redux' to access to your global state and manage it as you want. See more here
https://react-redux.js.org/introduction/basic-tutorial
Hi I am looking for the solution to change text dynamically.
I am writing code to show processing results on screen.
After some googling, I found there is a code to update text dynamically as follows.
But I would like to update text without any internal event. I want to change text from outside of the class. But I don't know how to implement it as I am a javascript and react-native beginner. There are other classes to process some functions so that I need to show the updated results using Results class which is an another component of the screen.
How can I deliver 'result' to Results class and how to update it dynamically and automatically?
class Results extends Component {
constructor() {
super()
this.state = {
log: 'Processing results'
}
}
updateText = (result) => {
this.setState({log: result})
}
render() {
return (
<View>
<Text onPress = {this.updateText}>
{this.state.log}
</Text>
</View>
)
}
}
This sounds to me that props can solve your problem.
Basically when you try to render Results class, pass along the value as a prop like below:
<Results dynamicText='HI' />
Then, from your Results class, access this external value via this.props.dynamicText as below
class Results extends Component {
render() {
return (
<View>
<Text>
{this.props.dynamicText}
</Text>
</View>
)
}
}
In addition to what #Issac answered, you can also hook up your current class to Redux and dispatch actions from another class to force state changes.
React Native and ReactJS has a different concept of how classes react to each other. Most other languages use inheritance based interactions to affect changes in classes other than itself. React itself is more composition based where changing the value/state/variable of one class requires either a state change or a prop change. The caveat to that us using Redux, which utilizes an overarching Store where any component that's connected to it can pull values or dispatch actions to change values.
I am trying to create a flatlist with list items. I managed to build one using one of the samples from https://facebook.github.io/react-native/docs/flatlist.html.
I am trying to extend this by creating something more complicated but I am stuck. I am trying to create a flatlist with list items like below. Ofcourse I can achive this by using one of those react native libraries but I am trying to avoid using libraries instead I want to construct a flatlist component with multiple renders because this approach would give me more control of the component. Would appreciate any help with this.
The easiest way to achieve it is to have a Row component and based on props you determine how to render it. Example:
class Row extends React.PureComponent {
render(){
const { item } = this.props
if(item.break){
return <Text>Break</Text>
}
return (
<View><Text>Normal item goes here</Text></View>
)
}
}
Can somebody please suggest any data table component for react native which can add rows dynamically and having editable cells. I am done searching in google. Thanks in advance.
Please find the package available for React Native data table
https://github.com/sussol/react-native-data-table
A React Native data table written purely in JSX with React. ## Installation npm install --save react-native-data-table ## Usage react-native-data-table provides a number of components for constructing a table through composition.
I introduced my own module for this feature from which you will be able to select row easily and much more.
You can use this component like this below
import DataTable, {COL_TYPES} from 'react-native-datatable-component';
const SomeCom = () => {
//You can pass COL_TYPES.CHECK_BOX Column's value in true/false, by default it will be false means checkBox will be uncheck!
const data = [
{ menu: 'Chicken Biryani', select: false }, //If user select this row then this whole object will return to you with select true in this case
{ menu: 'Chiken koofta', select: true },
{ menu: 'Chicken sharwma', select: false }
]
const nameOfCols = ['menu', 'select'];
return(
<DataTable
onRowSelect={(row) => {console.log('ROW => ',row)}}
data={data}
colNames={nameOfCols}
colSettings={[{name: 'select', type: COL_TYPES.CHECK_BOX}]}
/>
)
}
export default SomeCom;
React Native DataTable Component