Is there any way I can use json form schema with custom renderer (using json schema to render react native UI elements) in react native.
I have seen couple of react native specific package which are inspired by json form but couldn't get those working as per the requirement.
I am also looking to use it with yup form validation package
Thanks.
Yes, it is possible to use a JSON form schema with a custom renderer to render React Native UI elements in a React Native app. There are several packages available that can help you achieve this, such as react-jsonschema-form and json-schema-form-generator.
To use a JSON form schema with a custom renderer in React Native, you will need to first install one of the above packages (or a similar one) using npm or yarn. Then, you can use the Form component provided by the package to define your form schema and specify the custom renderer that you want to use.
For example, to use the react-jsonschema-form package, you could do the following:
import { Form } from 'react-native-jsonschema-form';
const schema = {
// your JSON form schema here
};
const uiSchema = {
// your custom renderer here
};
const MyForm = () => (
<Form schema={schema} uiSchema={uiSchema} />
);
Once you have defined your form, you can use the yup form validation package to validate the form values when the user submits the form. To do this, you can use the validate option of the Form component, passing in a yup validation schema to validate the form values against.
For example:
import * as yup from 'yup';
const schema = yup.object().shape({
// your yup validation schema here
});
const MyForm = () => (
<Form schema={schema} uiSchema={uiSchema} validate={validate} />
);
Related
I am currently experiencing issues with the Configurable Product Integration of Spartacus. So far I have set up the storefront to show my configurable products, which is working quite well.
Now I am trying to customize a form element, let's say an input field to insert a custom suffix that is dynamically added by the backend. Specifically, I am trying to replace the cx-configurator-attribute-input-fieldinside https://github.com/SAP/spartacus/blob/develop/feature-libs/product-configurator/rulebased/components/form/configurator-form.component.html
So far I have tried to import it in the module:
ConfigModule.withConfig({
cmsComponents: {
ConfiguratorAttributeInputField: {
component:CustomConfiguratorComponent
}
}
})
which is not working, probably because the component is not a static CmsComponent.
I also tried importing it via outlet definition in typescript:
export class CustomConfiguratorComponent implements OnInit{
constructor(private componentFactoryResolver: ComponentFactoryResolver, private outletService: OutletService){}
ngOnInit(){
const factory = this.componentFactoryResolver.resolveComponentFactory(CustomInputFieldComponent);
this.outletService.add('cx-configurator-attribute-input-field', factory);
console.log("REGISTERED");
}
}
which is also not working.
When I add the outlet via ng-template to a template reference, I can see the component, so the import of the component should be working correctly:
<ng-template cxOutletRef="VariantConfigurationTemplate" cxOutletPos="before">
<app-custom-input-field></app-custom-input-field>
</ng-template>
How can I get this to work, so that I can replace a dynamically added Spartacus component? Specifically the ConfiguratorAttributeInputFieldComponent (https://github.com/SAP/spartacus/blob/develop/feature-libs/product-configurator/rulebased/components/attribute/types/input-field/configurator-attribute-input-field.component.ts)
I have a React Native app where I am using HeadlessJS to call a handler on receipt of a Firebase Cloud Messaging notification.
Inside my handler which is a function, not a React component, I am accessing the Redux store using the following method:
import store from '../redux/store';
const backgroundNotificationHandler = async message => {
const state = store.getState();
...
My question is, how can I update the store in a a way that isn't a 'hack'?
Currently I have the following line in the function:
state.user.wokenFromBackgroundListener = true;
Surprisingly is works, but this is without dispatching an action or using a reducer.
Is there a better way to do it?
I can't dispatch an action because the function is not a component and it is not a component because it can't be - it requires a function as in the docs.
My code in index.js is:
AppRegistry.registerComponent(appName, () => App);
firebase.messaging().setBackgroundMessageHandler(backgroundNotificationHandler);
Dispatching from component props is just an added functionality provided by react-redux. You can still use plain redux api, in this case you can dispatch to store using store.dispatch
store.dispatch({ type: 'SOME_ACTION', payload: [1,2,3] })
However I'm not sure if you should be doing that, I haven't used HeadlessJS myself but I would first check and make sure that these task handlers are actually being run in the same context your app is running (e.g. confirm that they share store instance with your app, and NOT create a separate store just because you import store in file with the handler)
For a react native app, is there a way to see console.log output in production? As far as I know this is impossible.
I know that I can write important messages to a file or to a remote database. I am looking for a simpler solution... Have you implemented such functionality using a github package that you recommend?
I am looking for a solution for android.
Get fancy by writing and using your own Component <ConsoleLog>
const ConsoleLog = ({ children }) => {
console.log(children)
};
Then use it:
render() {
return (
<div>
<h1>List of todos</h1>
<ConsoleLog>{ this.props.todos }</ConsoleLog>
</div>
);
}
if you want to log to file, use react-native-file-log package
i know its possible to store data using local storage for a web app but how would i do this for a react native app. the app I've made allows the user to enter a phone number into the input field and it will call that number. I also have a login page. I would like the last number they entered into the input field still be there when they re open the app. heres the code below
<View>
<Text style={styles.phoneNumberTitle}>PHONE NUMBER</Text></View>
<TextInput style={styles.inputs}
ref={(el)=>{this.recipient=el;}}
onChangeText={(recipient)=>this.setState({recipient})}
value={this.state.recipient}/>
<Button title="CALL"
style={styles.callButtCont}
onPress={this.setTimer.bind(this)} />
UPDATE:
AsyncStorage is Deprecated. Use react-native-community/react-native-async-storage instead.
ORIGINAL ANSWER:
AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.
import AsyncStorage at the top :-
import { AsyncStorage} from 'react-native'
set like this :-
AsyncStorage.setItem("recipient", this.state.recipient);
and access like this :-
AsyncStorage.getItem("recipient").then((value) => {
alert("Get recipient >> ", value);
}).done();
Reference: https://facebook.github.io/react-native/docs/asyncstorage.html
My schema defination in file realmDB.js :
'use strict';
var Realm = require('realm');
class ShortAnswer extends Realm.Object{}
ShortAnswer.schema = {
name: 'ShortAnswer',
properties: {
question: 'string',
answer: 'string'
}
};
export default new Realm({schema: [ShortAnswer]});
In my short_answer.js file,
I include the realmDB by using import realm from './realmDB';.
Here,
realm.write(() => {
realm.create('ShortAnswer',{
question: this.state.short_question,
answer: this.state.short_answer
});
});
I am new in realm and react native.
The input for the question and answer is taken from two respective TextInput. But when i give input and press the save button to save question and answer into the database, the error Object type 'ShortAnswer' not found in schema. occurs. What can be done to solve this problem ?
I had a similar error message and problem. Turns out I need to do a better job of reading the realm documentation. In my case I had multiple Realms, on for Contacts and another for Auth data. The Auth data realm was created more recently and was overwriting the Contacts realm. To solve this problem I needed to add a path to the realm creation like so:
export default new Realm({path: 'somePath.realm', schema: [ShortAnswer]});
Afterwards everything worked fine.
This should work. The only thing I see different from mine is that you are inheriting from Realm.Object. Have you tried just doing this?
class ShortAnswer {}