The WebView##
## of react-native does not have property to find the currently active Element id to change the current state of container.
You will have to use WebView's injectJavascript function
An example of selecting the element id of a div and change the text:
class WebView extends Component{
focusOnDiv() {
this.webView.injectJavascript(`
var textField = document.getElementById("text-field");
textField.textContent = "New content";
`);
}
render() {
<WebView ref={webView => this.webView = webView}/>
}
}
Related
I have a flat list and it contains a list of posts and videos, now I need to count the views for each item, I tried using viewabilityConfig and onViewableItemsChanged in the flat list and it works fine if I only want to count visible item as a view.
problem is that I had a function written inside onViewableItemsChanged for pausing video right after user scrolls from video.
now I have two functions with different execution times. how can I handle these two functions ?
onViewableItemsChanged = (info) => {
if (this.props.enableView) {
console.log('item viewed after minimumViewavlitytime 5s: ', info) //done after 5s of view time
}
this.pauseVideoFunction(); //done exactly after scrolling
};
viewabilityConfig = {
minimumViewTime:5000,
waitForInteraction: false,
viewAreaCoveragePercentThreshold: 95,
}
i handled it this way:
removed minimumViewTime from config file
added this to constructor since its a class component
this.debouncedViewCount = debounce(this.countView, 5000);*
called debouncedViewCount inside onViewableItemsChanged
now I have a denounced view counter which runs after 5 second if scroll doesn't move and can pause video right after scrolling
class ComponentA extends React.Component {
constructor(props) {
super(props);
this.debouncedViewCount = debounce(this.countView, 5000); //aaaaaaaaaaa
}
countView = (info) => {
debounce(console.log('Debouced 5s', info), 5000, false)
}
onVideoExitScreen = (info) => { //todo working on view aaaaaaaaaaaaaaaaaaaa
if (this.props.enableView) {
this.debouncedViewCount(info);
}
pauseVideoFunction();
};
}
//inside Flatlist
onViewableItemsChanged={this.onViewableItemsChanged}
How to configure detailsHeader properly to make it show tooltip for the header text?
In each column, I've added ariaLabel, name, key, fieldName and have tried the top answer in this post but does not work: How to render a column header with both text and a tooltip icon in Fabric DetailsList
I am using "#fluentui/react": "^8.11.1"
private renderFixedDetailsHeader: IRenderFunction<IDetailsHeaderProps> = (props, defaultRender) => {
if (!props) {
return null;
}
const onRenderColumnHeaderTooltip: IRenderFunction<IDetailsColumnRenderTooltipProps> =
(tooltipHostProps: any) => {
return (
<TooltipHost content={tooltipHostProps.column.name}>
{tooltipHostProps.column.name}
</TooltipHost>
);
}
return (
<Sticky stickyPosition={StickyPositionType.Header} isScrollSynced>
{defaultRender!({
...props,
onRenderColumnHeaderTooltip,
})}
</Sticky>
);
}
// render Detail Header
public render(): JSX.Element {
return (
<ShimmeredDetailsList
columns={this.state.columns}
items={this.state.items}
onRenderItemColumn={this.props.onRenderItemColumn}
enableShimmer={this.props.isLoading}
setKey={this.props.setKey}
key={this.props.setKey}
selectionMode={SelectionMode.none}
onShouldVirtualize={() => false}
onRenderRow={this.props.showBlueBackgroundGrid ? this._onRenderRow : undefined}
onRenderDetailsHeader={this.renderFixedDetailsHeader}
/>
);
}
// Render detail list.
The fluent UI provides us onRenderDetailHeader to create our own custom header. You can return the custom header with tooltip or your own styles also.
I'm using React Native with NativeBase and would like to make the labels of my Picker more complicated than just one plain string of text.
But is it even possible to pass elements as the label, say multiple child elements wrapped in a single top-level element?
Or do Pickers only support plain text as labels?
As requested by bennygenel, here's a version of what I've tried:
export default class ThingPicker extends React.Component {
render() {
const {
initialThing,
things,
onThingChanged,
} = this.props;
const orderedThings = things.sort();
return (
<Picker
selectedValue={initialThing}
onValueChange={onThingChanged}>
{buildThingItems(orderedThings)}
</Picker>
);
}
}
function buildThingItems(orderedThings) {
let items = orderedThings.map(th => {
const it = th === "BMD" ? (<Text key={th} label={"foo"} value={"bar"}}>Hello</Text>)
: (<Picker.Item key={th} label={th} value={th} />);
return it;
});
}
Yes! It is possible, it just might not look very "right" for React/JSX code. Just create the elements you need and assign them to the label field:
function buildThingItems(orderedThings) {
let items = orderedThings.map(th => {
const it = (<Picker.Item
key={th}
label={currency === "BMD" ? (<Text>Hello</Text>) : th}
value={th} />);
return it;
});
}
This is my Text tag in react native i want to change its input value which is "abc" to "123" or any other string with the help of refs. edit()
{
this.refs.ref1
}
<Text ref="ref1" onPress={this.edit.bind(this)}>abc</Text>
What is can use in edit function to change string in Text
You can put the text in the state and update the state onPress, which will trigger react to update the ui:
constructor(props) {
super(props)
this.state = {mytext:'abc'}
}
edit() {
this.setState({mytext:'123'})
}
render() {
return <Text ref="ref1" onPress={this.edit.bind(this)}>{this.state.mytext}</Text>
}
If you need to use a reference, then put a reference on the component that renders your Text and call this.ref1.setState({mytext:'something'}) to dynamically change the text.
hai i am trying to move the view up when keyboard as shown using react-native,I followed the #sherlock's comment in (How to auto-slide the window out from behind keyboard when TextInput has focus? i got an error like this
I don't know how to resolve this error, can any one help me how to resolve this, any help much appreciated.
There's a great discussion about this in the react-native github issues
https://github.com/facebook/react-native/issues/3195#issuecomment-147427391
I'd start there, but here are a couple more links you may find useful, one of which is mentioned already in the article you referenced...
[React Tips] Responding to the keyboard with React Native
Andr3wHur5t/react-native-keyboard-spacer
In my library "react-native-form-generator" (https://github.com/MichaelCereda/react-native-form-generator) i did the following.
I created a Keyboard Aware scroll view (partially modified from https://github.com/facebook/react-native/issues/3195#issuecomment-146518331)
the following it's just an excerpt
export class KeyboardAwareScrollView extends React.Component {
constructor (props) {
super(props)
this.state = {
keyboardSpace: 0,
}
this.updateKeyboardSpace = this.updateKeyboardSpace.bind(this)
this.resetKeyboardSpace = this.resetKeyboardSpace.bind(this)
}
updateKeyboardSpace (frames) {
let coordinatesHeight = frames.endCoordinates.height;
const keyboardSpace = (this.props.viewIsInsideTabBar) ? coordinatesHeight - 49 : coordinatesHeight
this.setState({
keyboardSpace: keyboardSpace,
})
}
resetKeyboardSpace () {
this.setState({
keyboardSpace: 0,
})
}
componentDidMount () {
// Keyboard events
DeviceEventEmitter.addListener('keyboardWillShow', this.updateKeyboardSpace)
DeviceEventEmitter.addListener('keyboardWillHide', this.resetKeyboardSpace)
}
componentWillUnmount () {
DeviceEventEmitter.removeAllListeners('keyboardWillShow')
DeviceEventEmitter.removeAllListeners('keyboardWillHide')
}
scrollToFocusedInput (event, reactNode, extraHeight = 69) {
const scrollView = this.refs.keyboardScrollView.getScrollResponder();
setTimeout(() => {
scrollView.scrollResponderScrollNativeHandleToKeyboard(
reactNode, extraHeight, true
)
}, 220)
}
render () {
return (
<ScrollView
ref='keyboardScrollView'
keyboardDismissMode='interactive'
contentInset={{bottom: this.state.keyboardSpace}}
showsVerticalScrollIndicator={true}
style={this.props.style}>
{this.props.children}
</ScrollView>
)
}
Then i use it like any other scrollview
import { KeyboardAwareScrollView } from 'react-native-form-generator'
...
handleFormFocus(event, reactNode){
this.refs.scroll.scrollToFocusedInput(event, reactNode)
}
...
<KeyboardAwareScrollView ref='scroll'>
<Form ref='registrationForm'
onFocus={this.handleFormFocus.bind(this)}
onChange={this.handleFormChange.bind(this)}
label="Personal Information">
........
</Form>
</KeyboardAwareScrollView>
on change my component (Form) will call scrollToFocusedInput in KeyboardAwareScrollView (using the ref).
i suggest to check the code of my library (see the link on top), or simply use it (everything it's already tested and working).
If you have further questions just comment