How to maintain aspect ratio of texture

When rendering a image as a texture to a surface, I’ve noticed that the aspect ratio is off. How do I preserve the aspect ratio?

I’ve defined my surface as follows:

<Surface ref={(img) => { this.img = img; }}
   width={Dimensions.get('window').width}
   height={310}>
  {activeFilter}
</Surface>

[gre]

another alternative syntax is:

const Mix2 = GL.createComponent( ({ children: [from, to], mix }) => ... );
<Mix2 mix={0.5}>
  <GLImage source={image1source} />
  <GLImage source={image2source} />
</Mix2>

but it’s up to you 😉

[dcworldwide]

This worked perfectly for my use case, it’s awesome work thanks again.

I used this technique:

<Mix2
  from={  <GLImage source={image1source} />  }
  to={  <GLImage source={image2source} />  }
  mix={0.5}
/>