Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

126
Views
How to keep text on Same position while animating it's Font Size? React Native

I am working on Text Scaling in which I want to scale the text but with keeping the x position. Now, I am scaling the Text but it's loses it's current position. Can someone help me out with it?

<Animated.View style={{ transform: [{ translateY: transText }] }}>

                                    <Animated.View onLayout={({ nativeEvent: { layout: { width, height } } }) => {
                                        label.current = { width, height };
                                    }} style={{ width: width - (width / 3), transform: [{ scale: textScale }, { translateX: labelTransX }, { translateY: labelTransY }], justifyContent: 'flex-end' }}>
                                        <TouchableWithoutFeedback onPress={handleMenu}>
                                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                                <View>
                                                    <Animated.Text style={{ color: isDarkMode ? colors.TextBodyL : 'black', fontSize: 28, fontWeight: 'bold' }} numberOfLines={1}>
                                                        {mainLabel}
                                                    </Animated.Text>
                                                </View>
                                                <Animated.View style={{ transform: [{ rotate: rotate.interpolate({ inputRange: [0, 180], outputRange: ['0deg', '180deg'], extrapolate: 'extend' }) }] }}>
                                                    <Icon name={'caret-down-outline'} size={20} color={isDarkMode ? colors.TextBodyL : 'black'} />
                                                </Animated.View>
                                            </View>
                                        </TouchableWithoutFeedback>
                                    </Animated.View>

                                    <Animated.View style={{ transform: [{ translateY: labelTransY }] }}>
                                        <Text style={{ color: isDarkMode ? colors.TextBodyL : colors.TextBodyD }}>
                                            {notesState.length} notes
                                        </Text>
                                    </Animated.View>

                                </Animated.View>

This code above somehow keeps text to maintain it's position but not too much accurate.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

There are a couple of options.

  1. Easy: Put your text in a container with justifyContent: 'center', alignItems: 'center'

  2. More annoying: add negative marginTop and marginLeft to your animated text properties, but multiply that amount by the change in fontSize, multiplied by PixelRatio/fontScale.

Hopefully the first option works for you; if not, let me know if you need more info on the second.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!