SliderRef

Similar to the Facebook React Native slider component, but refers directly to the CYIScrollBarView After Effects object.

Example usage

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import {Composition,
  SliderRef,
  TextRef
} from '@youi/react-native-youi';

export default class SliderRefExample extends Component {

  state = {
    sliderState: "Stopped: 0"
  }

  render() {
    return (
      <Composition source="SliderRef_MainComp">
          <SliderRef 
            name="Slider" 
            minimumValue={0}
            maximumValue={100}
            step={1}
            onValueChange={(value) => this.setState({sliderState: "Sliding: " + value})}
            onSlidingComplete={(value) => this.setState({sliderState: "Stopped: " + value})}
          />
          <TextRef name="Value" text={this.state.sliderState} />
      </Composition>
    );
  }
}

Props


Reference

Prop: name

After Effects layer name

Type Required
String Yes

Prop: style

Similar to style prop of Facebook React Native slider component.


Prop: disabled

Similar to disabled prop of Facebook React Native slider component.


Prop: focusable

Determines whether the component should be focusable or not. Default is true.

Type Required
bool No

Prop: onSlidingComplete

Similar to onSlidingComplete prop of Facebook React Native slider component.


Prop: onValueChange

Similar to onValueChange prop of Facebook React Native slider component.


Prop: onCompositionDidLoad

Invoked when the parent composition is loaded successfully and the Ref component gets attached to it.


Prop: maximumValue

Similar to maximumValue prop of Facebook React Native slider component.


Prop: maximumTrackImage

Similar to maximumTrackImage prop of Facebook React Native slider component.


Prop: maximumTrackTintColor

Similar to maximumTrackTintColor prop of Facebook React Native slider component.


Prop: minimumValue

Similar to minimumValue prop of Facebook React Native slider component.


Prop: minimumTrackImage

Similar to minimumTrackImage prop of Facebook React Native slider component.


Prop: minimumTrackTintColor

Similar to minimumTrackTintColor prop of Facebook React Native slider component.


Prop: step

Similar to step prop of Facebook React Native slider component.


Prop: thumbImage

Similar to thumbImage prop of Facebook React Native slider component.


Prop: trackImage

Similar to trackImage prop of Facebook React Native slider component.


Prop: value

Similar to value prop of Facebook React Native slider component.


Prop: visible

Determines whether the component should be visible or not. Default is true. Note the following:

  • Component visibility is different from component opacity.
  • Components that are not visible are not focusable.
Type Required
bool No

Prop: testID

Similar to testID prop of Facebook React Native slider component.