deanhet / react-native-text-ticker

React Native Text Ticker/Marquee Component
MIT License
444 stars 75 forks source link

Font changes on animation #98

Closed corderop closed 3 years ago

corderop commented 3 years ago

Hi!. First, thank for develop this plugins, it's so useful and saves a lot of time. I want you to show a problem that I found. When the text come from the right side, it change the fontFamily of the text. An example:

With the code:

import React from 'react'
import { Text, View } from 'react-native'
import { ExclamationCircleOutline } from 'react-native-heroicons';
import TextTicker from 'react-native-text-ticker';
import { styles } from './style'

const Alert = (props) => {

  return (
    <View style={[styles.main, props.style]} >
      <View style={styles.titleView}>
        <ExclamationCircleOutline 
          size={30} 
          stroke="#f8f8f8"/>
        <Text style={styles.title}>Error con la contraseña</Text>
      </View>
      <View style={styles.messageView}>
        <TextTicker 
          style={styles.infoMessage}
          scrollSpeed={400}
        >
          La contraseña debe tener entre 8 y 32 caracteres
        </TextTicker>
      </View>
    </View>
  );

}

export default Alert;

Styles:

import { StyleSheet } from 'react-native'

let styles = StyleSheet.create({

  main: {
    backgroundColor: '#d63333',
    borderRadius: 10,
    padding: 10,
    width: '100%',
    position: 'absolute',
    top: 20,
  },

  titleView: {
    flex: 0.6,
    flexDirection: 'row',
    alignItems: 'center',
  },

  title: {
    fontSize: 16,
    fontFamily: 'OpenSans_700Bold',
    color: '#f8f8f8',
    marginLeft: 10,
    flexGrow: 2
  },

  messageView: {
    marginTop: 10    
  },

  infoMessage: {
    fontSize: 16,
    fontFamily: 'OpenSans_400Regular',
    color: '#f8f8f8'
  }

});

module.exports = { styles }

I've imported the fonts with as expo says:

import React from "react";
import { useFonts, OpenSans, OpenSans_700Bold, OpenSans_600SemiBold, OpenSans_400Regular } from '@expo-google-fonts/open-sans';
import LoginScreen from './app/screens/login/login'

export default function App() {

  let [fontsLoaded] = useFonts({
    OpenSans,
    OpenSans_600SemiBold,
    OpenSans_400Regular,
    OpenSans_700Bold
  });

  return (
    <LoginScreen />
  );

}
corderop commented 3 years ago

I don't know why but without changing anything, it stops doing it. I'm closing the issue.