In react-native, I could just simply use WebView, how do I do it in ReactXP without using 3rd party library ?
Like the one discussed here Render HTML in React Native
Related
I wish to use Algolia to setup InstantSearch in my React Native project. I am using this tutorial to learn the basics.
It appears in their RefinementList and InfiniteHits components there is a parameter: refine. This parameter seems to play a key role in the functionality of this tutorial's app.
Where can I get an example of how this refine() method would look like?
Please help me with some resources. An explanation of this refine() method would also help.
Thanks!
I think there's a typo in the documentation at the time of this writing (for which I opened a pull request), and the name of the actual prop is refineNext.
The documented InfiniteHits example from the React Native guide uses a connector, which is a lower-level abstraction allowing users to fully control the UI. This is what allows you to use React Native code for the UI while having access to the InfiniteHits data and logic. You can read more about the connectInfiniteHits connector in the documentation.
The provided refineNext function lets you load more results. It doesn't take any arguments, all you need to do is call it whenever you want to load more results from Algolia. In the example, it's being used in the onEndReached callback of React Native's FlatList component, whenever the hasMore provided prop is true. This allows loading more results once when the scroll position gets within onEndReachedThreshold of the rendered content.
I am trying to use expo google siginin. However I cannot find how to render the signin button itself. How do I get the actual button to render in my view?
I am using this doc: https://docs.expo.io/versions/v36.0.0/sdk/google/
Expo doesn't provide the button for you. You can use react-native-elements. They have a SocialIcon component, which does exactly what you need. Just give it type={"google"} as a prop.
<SocialIcon
title={"Sign In With Google"}
button={true}
type={"google"}
/>
More about the component here.
At the top of my new react native app some boilerplate code is created
export default class App extends Component < {} > {
render() {
...
}
}
Within the Learn the Basics webpage of the React Native Documentation there is a section on Component. Within this section it mentions
A component can be pretty simple - the only thing that's required is a
render function...
I can't see in the API list an entry for Component. I presume this Component has the same idea as Object in Java as the base class for everything.
Java's Object class provides some methods such as toString().
I would like to know :
Is my presumption correct?
Is there a weblink to documentation somewhere that details the full
api for Component?
What else provided by react native, that isn't my own custom code, can be put inside my App
class?
You can read about React Components here. React-Native utilizes React architecture.
Component is a module of your app that has a particular functionality. On the left sidebar here you can see a section called "Components" These are the default React-Native components. You can create other components, needed in your app by using those components. Examples of how the components could look or be created are components of Expo SDK and React-Native-Elements component library.
Through this link you can view all of React-Native and Expo components on your device using Expo app: https://expo.io/#community/native-component-list
Your custom components / components of other libraries that you would like to render (put them in return statement, wrapped with parenthesis, like return (<Text>Hello World</Text>);.
Plus anything that is related to rendering your screen could also be put inside the render method, but outside the return statement. For example, state / props destructuring, conditional rendering (if something is true - show this view, else show this view) and so forth.
First, I do not speak English well.
I would like to add draft-js rich-text-editor to react-native.
However, when I browse the materials, I have difficulties because of the only data related to react.
Can not add draft-js in react-native?
I do not want to add draft-js-render.
I want to add a text-editor.
The component we use in the resume.com React Native app is the react-native-pell-rich-editor component, which was the best free and open source component I could find for this problem. It was also the simplest and most consistent/flexible HTML parser I found. We use a draft JS editor on the main resume.com site, but this component was better for React Native.
Consider Using Draft.js for rich text editing on the web app, then convert the output to a json object with Draft.js convertToRaw function and store it in the database.
if the consumer of the rich text is a react-native mobile application, what is the best approach to represent the rich text?
is there any robust work or library that iterate through the json object and export native Text and Image components?
also there are some libraries that export the json object to html:
https://github.com/sstur/draft-js-export-html
https://github.com/rkpasia/draft-js-exporter
the exported html then can be represented with a webview component. is this a reliable approach?
another way for representation would be putting react in react-native webview and use Draft.js Editor with readOnly prop. but I don't have any idea which way to go!
This seems to be the best approach.
You must fetch the json and write a parser that understands Draft.js model (inlineStyleRanges, entityRanges, entityMap,...) and based on that, exports to native components.
At work we had the same problem, so we've developed a library that does the job, it's called react-native-draftjs-render.
It has a sample project where you can see how it works and understand how to use it. It is also available on npm.
If you already have the html version and want to use it, you will also need a parser to convert the html into native components. react-native-htmlview seems to do it but I've never used.
Render native components is better than using webviews (they are very limited and slow), so I don't recommend this approach.
We use redraft to approach that rich text from draft-js render to HTML5 and Weex(rax). And I am sure you can use it achieve your goal because the redraft is just a convert function with zero dependencies, you can custom the render element like div in HTML or View in React Native.