renderiOSBigTitle.js

renderIOSBigTitle = () => {
    if (Platform.OS === 'ios' && this.props.title) {
        const fontSize = this.state.scrollY.interpolate({
            inputRange: [-50, 0],
            outputRange: [40, 34],
            extrapolate: 'clamp'
        });
        const top = this.state.scrollY.interpolate({
            inputRange: [0, 70],
            outputRange: [0, -70]
        });
        return (
            <Animated.View style={ [styles.iOSBigTitleContainer, {transform: [{translateY: top}]}]}
                           key="iosBigTitle">
                <Animated.Text
                    allowFontScaling={false}
                    style={[styles.iOSBigTitle, {fontSize: fontSize}]}>
                    {title}
                </Animated.Text>
            </Animated.View>
        )
    }
};

const styles: StyleSheet = StyleSheet.create({
    iOSBigTitleContainer: {
        position: 'absolute',
        top: headerHeight + statusBarHeight,
        left: 0,
        width: 100 * vw,
        height: 56,
        backgroundColor: '#ffffff',
        borderBottomWidth: 1,
        borderBottomColor: '#f2f2f2'
    },
    iOSBigTitle: {
        marginTop: 8,
        marginBottom: 8,
        marginLeft: 16,
        fontSize: 34,
        lineHeight: 40,
        fontWeight: 'bold',
        color: '#353535',
        backgroundColor: 'rgba(0,0,0,0)',
    }
});