I am using react-native-mathjax for rendering mathematical equations in my react native app but auto-adjust height of webview is not working in react-native-mathjax library when I move to the next query. react-native-mathjax takes the previous height to render the next query. how can I adjust view height in my app?
import React from 'react';
import { View, Text } from 'react-native';
import MathJax from 'react-native-mathjax';
function Test() {
return (
<View>
<MathJax
html={<p><span class="math-tex">\(\begin{bmatrix} 2 &1 \\[0.3em] 3&4\\[0.3em] \end{bmatrix}\)</span></p>}
/>
</View>
);
}
export default Test;
Use react-native-autoheight-webview inside react-native-mathjax instead of react-native-webview. It will automatically adjust height of webview when you move to next query.
npm install react-native-autoheight-webview
Related
I am using 'react-native-qrcode' library and trying to create a QR Code, it seems to be working up until the point I want to make it take 100% of it's own container.
I've tried to:
put it in a View, it doesn't work
use flex: 1 on the above mentioned View and on the QR Code
NOTE: I had to change the WebView in the node_modules since now it is a separate library.
import React from 'react';
import QRCode from 'react-native-qrcode';
export default function CardDetails({ navigation }) {
return (
<QRCode
value={"Hello World"}
size={250}
/>
)
}
The problem originates from the QRCode library. This is the code from the library.
If I change the canvas -> context -> size to size * 4 it is will always cover the whole white space and will fit / dynamically change whenever I pass another size.
P.S. still trying to figure it out why x4 is the solution.
return (
<View>
<Canvas
context={{
size: size,
value: this.props.value,
bgColor: this.props.bgColor,
fgColor: this.props.fgColor,
cells: qr(value).modules,
}}
render={renderCanvas}
onLoad={this.props.onLoad}
onLoadEnd={this.props.onLoadEnd}
style={{height: size, width: size}}
/>
</View>
);
Am trying to implement a chat app using ReactNative. The problem am facing is, after new item is added to the FlatList, am trying to scroll the FlatList items to the bottom so that the newly added message is visible.
When I checked the documentation, I can see a method called scrollToEnd(). But not sure how to use it as am following the Functional Component style of coding. Because when I googled, I can see examples where it uses the ref in a Class Component style coding.
But couldn't find how to use it in Functional Component!
I think you're looking for useRef
// I hope you don't mind the typescript
import {useRef} from 'react';
import {FlatList} from 'react-native';
export const Comp = () => {
const flatListRef = useRef<FlatList<any>>();
// however you detect new items
flatListRef?.current?.scrollToEnd();
return (
<FlatList
data={[]}
renderItem={() => null}
ref={flatListRef}
/>
);
}
But I think if you use inverted={true} on the flat list, it should snap to the top, or better bottom (I think).
For typescript you can use just:
const listRef = useRef<FlatList>(null);
and in your code you just need to check if your ref is exist:
listRef?.current?.scrollToIndex({animated: true, index: yourIndex})
I've recently started to work on React Native. I'm trying to create a simple function for generating Random Colors. The problem I am facing is that my IDE says that the variables that I have declared are not in use. Hence, the color is not generated on the my device's screen. Can anyone kindly have a look at it tell me what am I doing wrong?
P.S: I tried setting the color manually in the "View state" by writing "backgroundColor: 'rgb(0,255,0)'}}/>" and it successfully worked. The only time I am facing a problem is when I am trying to use the randomRGB function.
import React from 'react';
import {StyleSheet, Button, View, Text} from 'react-native';
const ColorScreen = () => {
return(
<View style={{height:100 , width:100, backgroundColor:randomRgb()}}/>
}
const randomRgb = () =>{
const red = Math.floor(Math.random()*256);
const green = Math.floor(Math.random()*256);
const blue = Math.floor(Math.random()*256);
return 'rgb(${red}, ${green}, ${blue})';
};
export default ColorScreen;
Nvm guys. I'm an idiot. I was using quote instead of backquotes. Yeah stupid I know, but I wouldn't delete this because there may be other people like me. So, use " ` " instead.
In React Native, using the following:
<StatusBar backgroundColor={config.colors.backgroundGray} barStyle="dark-content" />
works well. However when navigating to a different screen, even though the above is the only instance of StatusBar used in the entire app, the status bar style turns to what essentially is "light-content" on its own. Rendering the StatusBar component deeper in again seems to yield no results.
The backgroundColor is controllable however. Any ideas?
You can apply Statusbar's own function to App.js.
App.js
import { StatusBar } from 'react-native';
StatusBar.setBarStyle('dark-content', true);
static setBarStyle(style: StatusBarStyle, [animated]: boolean)
I'm new to React Native and I'm trying to have icons that are able to have their color changed based on json data received. I've been able to use React Native Vector Icons. However, I have my own icons that I would like to use. On the linked repo page there is something that talks about generating your own icons, but I'm not familiar enough to know how it is supposed to work. My icons are .png files and I'd like to make them so I can give them a color attribute on the fly in my app. I wanted to see what the process was to be able to do that if it was even possible. Can I use the process described in the repo?
Thanks in advance!
So, to create your own icon component, this could be a simple representation:
import React from 'react'
import { View, Image } from 'react-native'
export default class Example extends React.Component{
renderIcon = (iconName, color) => {
iconName = this.props.iconName
color = this.props.color
return<Image source={require(`/example/icons/${exampleIcon}${color}.png`)}/>
}
render(){
return(
<View>
{this._renderIcon}
</View>
)
}
}
For example, your .png Icon is called IconHomeFocused, and it's an icon of the home icon when it's focused...then you would put, in your component that you want your Icon to be in: <Example iconName = 'IconHome' color = 'Focused'/>. Of course, this requires you to name your icons carefully. I didn't want to write a million if statements so this seemed like the easiest sort of integration for me. I'm sure there are much better interpretations out there though. Good luck.